CSS Flex Container

CSS Flex Container

A flex container is an element that establishes Flexbox layout for its flex items.

Setting an element's display property to flex or inline-flex creates a flex container. Its in-flow direct children become flex items and can then be arranged, aligned, spaced, wrapped, grown, or shrunk using Flexbox properties.

Creating a Flex Container

A Flexbox layout begins by applying display: flex or display: inline-flex to a parent element.

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

.flex-container {
  display: flex;
}

The parent becomes a flex container, and its in-flow direct children become flex items.

Simply creating the flex container changes the formatting of its children. Additional Flexbox properties can then control their direction, wrapping, spacing, alignment, and flexibility.

display: flex

The flex value creates a block-level flex container.

.flex-container {
  display: flex;
}

The flex container participates in the surrounding layout as a block-level box, while its flex items are laid out according to the Flexbox formatting model.

For a simple row of items, no additional Flexbox declarations are required.

.navigation {
  display: flex;
}

With the initial Flexbox settings, the flex items are placed along the main axis in a row for the usual horizontal writing mode.

display: inline-flex

The inline-flex value also establishes a flex formatting context, but the flex container itself participates in the surrounding layout as an inline-level box.

.flex-container {
  display: inline-flex;
}

This can be useful for a Flexbox component that should remain within an inline formatting context rather than behaving as a block-level container.

The flex items inside flex and inline-flex are laid out using the same Flexbox model. The difference concerns the outer display behavior of the container.

Flex Items

Once a flex container is created, its in-flow direct children become flex items.

<div class="flex-container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

The three elements with the item class are flex items because they are direct children of the flex container.

Flex items can later use item-specific properties such as order, flex-grow, flex-shrink, flex-basis, and align-self.

Direct Children

Flexbox directly lays out the flex container's children. Descendants nested inside those children do not automatically become flex items of the outer container.

<div class="flex-container">
  <div class="item">
    <h2>Heading</h2>
    <p>Paragraph</p>
  </div>
  <div class="item">Second Item</div>
</div>

In this example, the two .item elements are flex items of .flex-container. The <h2> and <p> remain children of the first flex item and are not flex items of the outer container.

If the first .item also needs Flexbox layout for its own children, it can become a flex container itself.

Container and Item Properties

Flexbox properties can be divided into properties that control the flex container and properties that control individual flex items.

Applying a container property to an individual item does not give that property the same role it has on the flex container. Likewise, item properties are intended to control individual flex items.

Keeping this distinction clear makes Flexbox much easier to learn.

Default Flex Layout

Creating a flex container activates several initial Flexbox values even when they are not explicitly written in the stylesheet.

.flex-container {
  display: flex;
}

Important initial values include:

In Flexbox, these initial alignment values produce behavior defined by the Flexbox and Box Alignment specifications. For example, the normal cross-axis alignment of flex items generally behaves like stretching when their cross size is automatic.

The upcoming tutorials examine each of these controls individually.

Flex Container Sizing

A flex container can use the same sizing properties as other CSS boxes, including width, height, min-width, max-width, and their logical equivalents.

.flex-container {
  display: flex;
  max-width: 800px;
  min-height: 200px;
}

The available space inside the container affects how its flex items are sized and distributed.

For example, properties such as justify-content distribute available space along the main axis, while flexible sizing can allow items to grow or shrink as the container changes size.

Nested Flex Containers

A flex item can also become a flex container for its own children.

.outer {
  display: flex;
}
.inner {
  display: flex;
}

<div class="outer">
  <div class="inner">
    <span>A</span>
    <span>B</span>
  </div>
  <div>Second Item</div>
</div>

The .inner element is a flex item of .outer and, at the same time, a flex container for its own children.

This makes it possible to build larger layouts from smaller Flexbox components without requiring every descendant to belong to the same flex container.

Flex Container Example

The following example compares normal block layout with display: flex and display: inline-flex. Open the example in the editor and change the display values to see how the container and its direct children respond.

.flex-example {
  display: flex;
}
.inline-flex-example {
  display: inline-flex;
}