css flex display: flex

display: flex is a CSS property that is used to create a flexible box layout. It allows you to easily align and distribute space between elements within a container. When you apply display: flex to a container element, its child elements become flexible items.

Here's 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 {
  /* styles for each item */
}

In this example, the container element has the display property set to flex, making it a flex container. The child elements with the class "item" become flexible items that can be positioned and resized within the container.

With flexbox, you can use various properties like justify-content, align-items, and flex-direction to control the alignment and positioning of the flexible items.