CSS Flexbox

Flex basis

The flex-basis property specifies the base length along the main axis and is usually set to a length unit or auto. flex-basis has a higher priority than width or height (if set).

We usually set flex-basis to the minimum length we find acceptable for an element. If we set it to 100% and at the same time have flex-wrap set to wrap, we can force individual elements to take up an entire line creating neat stacks of elements. In the lesson about responsive design we use this feature to create mobile friendly layouts.

Copy
100%

<div class="wrapper">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>

  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>

  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  flex-basis: 100px;
  height: 100px;
}

.red {
  background-color: #d32f2f;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}