Creating a Flexbox Layout Using CSS

In this lesson, we'll discuss three properties that lets you manage the size of a flex inside a container, as the container size changes.

Flex basis

flex-basis lets you set the initial size of a flex item. Acceptable inputs are absolute values such as 80px, relative values such as 40%, or auto.

When set to an absolute value such as 80px, the container will try to initialize the item at the specified size, if there's enough space in the container.

<div class="container">
  <div class="item flex">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: flex;
  gap: 10px;
}
 
.flex {
  flex-basis: 80px;
}

However, if there's not enough space, the item will shrink to fit inside the container.

Try the following demo with flex-basis set to 80px and 120px, adjust the container size to see their differences.

When set to an relative value such as 40%, the item will be 40% of the container width, which means will will grow as the container grows.

.flex {
  flex-basis: 40%;
}

Try the following demo with flex-basis set to 40% and 30%, adjust the container size to see their differences.

When set to auto, the item will be created according to its width and height.

.flex {
  width: 50px;
  height: 50px;
 
  flex-basis: auto;
}

Flex grow

flex-grow determines how much faster, or slower, an item grows as the container grows. It accepts numeric values.

When set to 0, the item does not grow. It will stay at its flex-basis.

.flex {
  flex-basis: 80px;
  flex-grow: 0;
}

Test this by setting flex-grow to 0:

When set to other values, it becomes a ratio.

Meaning if one item has flex-grow: 2 and the others are 1, the item with 2 will grow twice as fast, gaining twice as much extra space as the container grows.

Try this by setting flex-grow to 1, 2, and 3, and compare their differences.

Flex shrink

flex-shrink determines how much faster, or slower, an item shrinks as the container shrinks. It also accepts numeric values. A larger number shrinks faster.

.flex {
  flex-basis: 80px;
  flex-grow: 0;
  flex-shrink: 1;
}

The default value is 1, meaning it shrinks proportional to the container.

When set to 0, the item does not shrink at all.

The flex shorthand

flex is a shorthand property for flex-basis, flex-grow, and flex-shrink, with the following syntax:

.flex {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

Some common combinations are:

• Fully inflexible, fixed-width item, like a logo.

.logo {
  flex: 0 0 120px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 120px */
}

• Flexible item that can grow and shrink equally, starting at 0px.

.nav-item {
  flex: 1 1 0px; /* Often written as `flex: 1;` */
}

• "Fluid" sidebar. Doesn't grow, doesn't shrink, 20% width.

.sidebar {
  flex: 0 0 20%;
}

• Content area. Takes up all remaining space, starts at 0px.

.content {
  flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}