CSS Flex Items

Flexbox is a powerful CSS layout tool that helps align and space items inside a container. While the flex container sets the overall layout, flex item properties control how each item behaves. Knowing these properties is key to building responsive and clean web layouts.

order

The order property controls the order in which flex items appear in the flex container. By default, all items have an order of 0. Items with a lower order value appear first, while items with higher order values appear later.

Example:

.container {
  display: flex;
  background-color: lightblue;
}
.item {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
}

<div class="container">
  <div class="item" style="order: 3;">Item 1</div>
  <div class="item" style="order: 1;">Item 2</div>
  <div class="item" style="order: 2;">Item 3</div>
</div>

Output :

flex-grow

The flex-grow property defines how much a flex item can grow relative to the other items when there’s extra space in the container. Its default value is 0, meaning the item will not grow.

Example:

.flex-container {
  display: flex;
  background-color: lightblue;
}
.item {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
}

<div class="flex-container">
  <div class="item" style="flex-grow: 1;">Item 1</div>
  <div class="item" style="flex-grow: 3;">Item 2</div>
  <div class="item" style="flex-grow: 1;">Item 3</div>
</div>

Output :

flex-shrink

The flex-shrink property determines how much a flex item will shrink relative to other items when the container space is limited. The default value is 1.

Example:

.flex-container {
  display: flex;
  width: 300px;
  background-color: lightblue;
}
.item {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
  width: 200px;
}

<div class="flex-container">
  <div class="item" style="flex-shrink: 1;">Item 1</div>
  <div class="item" style="flex-shrink: 2;">Item 2</div>
</div>

Output :

flex-basis

The flex-basis property specifies the initial size of a flex item before any growing or shrinking occurs. It can be defined in pixels, percentages, or auto.

Example:

.flex-container {
  display: flex;
  background-color: lightblue;
}
.item {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
}

<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item" style="flex-basis: 200px;">Item 2</div>
</div>

Output :

flex (shorthand)

The flex property is a shorthand that combines flex-grow, flex-shrink, and flex-basis in one line.

Example:

.flex-container {
  display: flex;
  background-color: lightblue;
}
.item {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
}

<div class="flex-container">
  <div class="item" style="flex: 1 1 100px;">Item 1</div>
  <div class="item" style="flex: 2 1 200px;">Item 2</div>
</div>

Output :

align-self

The align-self property allows a single flex item to override the container’s align-items property and align itself differently on the cross-axis (vertical axis in a row container, horizontal axis in a column container).

Example:

.flex-container {
  display: flex;
  align-items: flex-start;
  height: 200px;
  background-color: lightblue;
}
.item {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
}

<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item" style="align-self: center;">Item 2</div>
  <div class="item" style="align-self: flex-end;">Item 3</div>
</div>

Output :