display flex

The display: flex property is used in CSS to create a flexible box layout. It turns an HTML element into a flex container and allows you to easily control the positioning and alignment of its child elements.

Here is an example of how to use display: flex:

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

.container {
  display: flex;
}

.item {
  flex: 1;
  margin: 10px;
  padding: 10px;
  background-color: #eaeaea;
}

In this example, the container class becomes a flex container, and the item class becomes the flex items inside the container. The flex: 1 property makes the items grow and shrink to fill the available space, and the margin, padding, and background-color properties are just for styling.

With display: flex, you can easily control the layout of your elements, such as aligning them horizontally or vertically, distributing them evenly, or adjusting their sizes