What is a flex container?

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

• Items display in a row (the flex-direction property's default is row).
• The items start from the start edge of the main axis.
• The items do not stretch on the main dimension, but can shrink.
• The items will stretch to fill the size of the cross axis.
• The flex-basis property is set to auto.
• The flex-wrap property is set to nowrap.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

By default, items are displayed as block elements stacked vertically:

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three
      <br>has
      <br>extra
      <br>text
  </div>
</div>

div {
  outline: 1px dashed blue;
  margin: 10px 10px;
  padding: 2px 2px;
}

But when we set the container display property to "flex", its children become flex items:

div {
  outline: 1px dashed blue;
  margin: 10px 10px;
  padding: 2px 2px;
  display: flex;
}