Back to Home

Flexbox Container Properties

Learn about all the properties that can be applied to a flex container.

Interactive Demo

Adjust the properties below to see how they affect the flex container.

Generated Code

<!-- HTML -->
<div class="container">
  <div class="item">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 class="item">7</div>
  <div class="item">8</div>
</div>

/* CSS */
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  align-content: stretch;
  gap: 0;
}

Preview

1
2
3
4
5
6
7
8

Main Axes & Cross Axes

Understanding the main axes and cross axes is crucial for mastering Flexbox. The main axes is defined by flex-direction, while the cross axes runs perpendicular to it.

1
2
3
Main Axes
Cross Axes
flex-direction: row

Detailed Explanations