CSS.3.1: Flexbox Layout

Search…
Column Layouts
When trying the examples, be sure to resize the width of the screen to see how the boxes behave dynamically.
Equal Column Layout
This is the basic flexbox column layout example. Every column div will divide itself equally across the width of the page.
.container {
  display: flex;
}
.flex1 {
  /* same as: flex:1; */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: white;
  border: 2px solid green;
}
<div class="container">
  <div class="flex1">
    Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
    culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
    exercitation sit.
  </div>
  <div class="flex1">
    Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
    culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
    exercitation sit.
  </div>
</div>
​https://codepen.io/awongh-sandwich/pen/poPWJgM​
Shrunk Column Layout
We can change the default style to make one column smaller by changing the flex-shrink property. This shrinks one column smaller than the other.
.container {
  display: flex;
}
.col {
  background-color: white;
  border: 2px solid green;
}
.flex1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.flex2 {
  flex-grow: 0;
  flex-shrink: 2;
  flex-basis: auto;
}
<div class="container">
  <div class="col flex1">
    Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
    culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
    exercitation sit.
  </div>
  <div class="col flex2">
    Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
    culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
    exercitation sit.
  </div>
</div>
​https://codepen.io/awongh-sandwich/pen/eYWGNzp​
Unequal Column Take Up Space
A magical property of flexbox is that it knows how to tell boxes to take up the rest of the available space. We set the flex-grow property to tell it to grow to fit the rest of the parent. If there is any horizontal space left, the right box will take it up.
.container {
  display: flex;
}
.col {
  background-color: white;
  border: 2px solid green;
}
.flex1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.take-up {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
<div class="container">
  <div class="col flex1">Duis aute ad exercitation sit.</div>
  <div class="col take-up">Nisi fugiat.</div>
</div>
​https://codepen.io/awongh-sandwich/pen/eYWGNdp​
Fixed Max Width Column
We can fix the maximum dimensions of a box with the flex-basis style. The left column will never take up more than 200px width. This measurement can also be set with other units.
.container {
  display: flex;
}
.col {
  background-color: white;
  border: 2px solid green;
}
.fixed-w {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 200px;
}
.flex1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
<div class="container">
  <div class="col fixed-w">
    Nisi fugiat incididunt esse sint id nulla fugiat duis qui nisi. Velit
    culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis aute ad
    exercitation sit.
  </div>
  <div class="col flex1">
    Nisi fugiat. culpa nisi ipsum aliqua ullamco sunt sint cillum et. Duis
    aute ad exercitation sit.
  </div>
</div>
​https://codepen.io/awongh-sandwich/pen/mdmBJrL​
There is a difference when setting flex-basis for column and for height
Read more about it here​
Flex Sizing
Vertical Centering
Finally, we can vertically center something with flexbox. Note however, that this is not a panacea. The height of the container must be explicitly set, and the box inside must also have it's dimensions set.
.vertical-container {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
}
.centered {
  width: 300px;
  background-color: white;
  border: 2px solid green;
}
<div class="vertical-container">
  <div class="centered">
    Dolor deserunt ad sunt amet laborum consectetur eu nulla exercitation
    magna tempor id consequat. Dolore mollit sit incididunt et sint pariatur
    duis esse eu commodo duis consequat sit. Nulla reprehenderit quis labore
    et. In sint nostrud deserunt id ea commodo id exercitation id dolore
    laboris id consequat esse. Enim laborum labore anim voluptate. Ex esse
    officia quis reprehenderit tempor anim eiusmod aliqua commodo. Velit
    esse dolor sit est.
  </div>
</div>
​https://codepen.io/awongh-sandwich/pen/xxdXGpr​
Further Reading
​https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-sizing--cms-31948​
​https://www.freecodecamp.org/news/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053/​
​https://mastery.games/post/flexbox-pitfalls/​
​https://learnlayout.com/flexbox.html​
​https://developer.mozilla.org/en-US/docs/Web/CSS/flex​
​https://css-tricks.com/almanac/properties/f/flex/​
​https://css-tricks.com/flex-grow-is-weird/​
Flexbox in 100 Seconds video here​
CSS.3: Flexbox
CSS.4: Responsive Design
Last modified 3mo ago
Copy link
Outline
Column Layouts
Equal Column Layout
Shrunk Column Layout
Unequal Column Take Up Space
Fixed Max Width Column
Flex Sizing
Vertical Centering