CSS Flex Items

CSS Flex Items

Flex items are the in-flow children of a flex container. Once an element becomes a flex item, Flexbox can control its size, position, order, and alignment along the container's main and cross axes.

Some Flexbox properties are applied to the flex container and affect the layout as a whole, while others are applied directly to individual flex items. Understanding this difference is important when building Flexbox layouts.

Creating Flex Items

Flex items are created automatically when an element becomes a flex container.

.flex-container {
  display: flex;
}

The in-flow children of the flex container participate in the Flexbox layout as flex items.

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

There is no separate CSS declaration required to make these child elements flex items.

Direct Children

Flexbox lays out the in-flow children of the flex container. Descendants nested inside those items do not become flex items of the outer container.

<div class="flex-container">
  <div class="item">
    <p>Nested content</p>
  </div>
  <div class="item">Item 2</div>
</div>

The two elements with the item class participate in the outer Flexbox layout. The paragraph remains normal content inside the first flex item.

A flex item can also be made into its own flex container, allowing Flexbox layouts to be nested.

Flex Item Properties

Several Flexbox properties are designed to be applied directly to flex items.

The following tutorials examine these item properties individually and in greater detail.

Flex Item Sizing

Flexbox can adjust flex item sizes according to the available space along the main axis.

.item {
  flex: 1;
}

The flex shorthand can make items flexible rather than leaving them entirely at their normal content or declared sizes.

Flex sizing is controlled primarily by the flex-grow, flex-shrink, and flex-basis components.

flex-grow

The flex-grow property controls how a flex item participates in the distribution of positive free space along the main axis.

.item {
  flex-grow: 1;
}

The initial value is 0, so flex items do not grow simply because extra main-axis space is available.

If several items have positive growth factors, the available free space is distributed according to those factors.

.item-1 {
  flex-grow: 1;
}
.item-2 {
  flex-grow: 2;
}

The second item has a larger growth factor, so it receives a larger share of the positive free space than the first item.

flex-shrink

The flex-shrink property controls how a flex item participates in shrinking when the items require more main-axis space than the container provides.

.item {
  flex-shrink: 1;
}

The initial value is 1, so flex items are allowed to shrink by default when necessary.

.fixed-item {
  flex-shrink: 0;
}

A value of 0 prevents that item from participating in the normal flex shrinking process.

flex-basis

The flex-basis property specifies the initial main size of a flex item before positive or negative free space is distributed.

.item {
  flex-basis: 200px;
}

For a row-oriented flex container, the main axis normally corresponds to the inline direction. For a column-oriented container, it normally corresponds to the block direction.

The initial value of flex-basis is auto, which allows the item's main-size property and content to participate in determining its starting size.

The flex Shorthand

The flex property is a shorthand that controls the grow, shrink, and basis components of a flex item.

.item {
  flex: 1 1 200px;
}

The three values represent:

The flex shorthand is commonly preferred when defining flexible sizing because it clearly establishes how the item should grow, shrink, and begin the sizing process.

The order Property

The order property changes the visual ordering group of a flex item without changing its position in the HTML source.

.item-1 {
  order: 2;
}
.item-2 {
  order: 1;
}

The initial value is 0. Items are arranged by ascending order value, with items having the same value following their source order.

Because visual order can differ from source and navigation order, order should not be used to repair an illogical HTML document structure.

The align-self Property

The align-self property allows an individual flex item to override the cross-axis alignment established by the container's align-items property.

.flex-container {
  display: flex;
  align-items: flex-start;
}
.special-item {
  align-self: flex-end;
}

Most items in this example use the container's flex-start alignment, while the special item is aligned toward cross-end.

The Align Self tutorial later in this section covers this property in detail.

Nested Flex Containers

A flex item can also establish a Flexbox layout for its own children.

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

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

The inner element is a flex item of the outer container and, because it also uses display: flex, it becomes a flex container for its own children.

This makes it possible to build complex interfaces from smaller Flexbox layouts.

Container and Item Properties

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

Container properties establish the overall Flexbox layout, while item properties provide more detailed control over individual flex items.

CSS Flex Items Example

The following example applies different Flexbox properties to individual flex items. Open the example in the editor and change the values to see how each item responds within the same flex container.

.item-1 {
  flex-grow: 1;
}
.item-2 {
  flex-grow: 2;
}
.item-3 {
  align-self: flex-end;
}