8 Flexbox Layouts You Should Know

Modern CSS layouts commonly used when building UI components

5 min readSep 14, 2021

01. Super Centering

Center items with three properties display: flex; justify-content: center; and align-items: center; If your text wraps multiple lines, then don’t forget text-align: center;

/* CSS */
.ex1 {
  display: flex;
  justify-content: center;
  align-items: center;
}/* HTML */
<div class="blue box ex1">
  <div class="coral item">Super Centering</div>
</div>

02. Left and Right

Use justify-content: space-between; and two container elements to create a left and right element.

/* CSS */
.ex2 {
  display: flex;
  justify-content: space-between;
}/* HTML */
<div class="blue box ex2">
  <div class="coral item">
    <span class="pink item">Logo</span>
  </div>
  <div class="coral item">
    <span class="pink item">Link 1</span>
    <span class="pink item">Link 2</span>
  </div>
</div>

03. Left, Right, and Perfectly Centered

Use the flex-basis: 0; and flex-grow: 1; CSS attributes on both the left and right elements to keep an element centered between two elements, even when the left and right elements are different sizes. A common mistake is to try using justify-content: space-between; However, this will not keep the Title centered when the left and right elements are different sizes.

Note: for smaller screen sizes you will need to handle overflow to keep the left and right elements shrinking at the same rate. Alternatively, you can consider a different layout for smaller screen sizes.

/* CSS */
.ex3 {
  display: flex;
  align-items: center;
}.ex3 > .left,
.ex3 > .right {
  flex-basis: 0;
  flex-grow: 1;
}.ex3 > .left {
  display: flex;
}.ex3 > .right {
  display: flex;
  justify-content: flex-end;
}/* HTML */
<div class="blue box ex3">
  <div class="coral item left">
    <span class="pink item">:)</span>
  </div>
  <div class="coral item">Title</div>
  <div class="coral item right">
    <span class="pink item">Link 1</span>
    <span class="pink item">Link 2</span>
    <span class="pink item">Link 3</span>
    <span class="pink item">Link 4</span>
  </div>
</div>

04. Even Columns

Use flex-basis: 100%; to make all the items the same width, regardless of the number of items in the flex container.

/* CSS */
.ex4 {
  display: flex;
}.ex4 > .item {
  flex-basis: 100%;
}/* HTML */
<div class="blue box ex4">
  <div class="coral item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam,   quos?
  </div>
  <div class="coral item">Item 2</div>
  <div class="coral item">Item 3</div>
  <div class="coral item">Item 4</div>
</div>

05. Vertically Center Icons and Text

Use display: flex; and align-items: center; to keep two items vertically centered.

/* Example 5 */
.ex5 {
  display: flex;
  align-items: center;
}.ex5 > input[type=’radio’] flex-shrink: 0;
  margin-right: 1rem;
}.ex5 > .item {
  flex-grow: 1;
}/* HTML */
<label class="blue box ex5" for="long">
  <input type="radio" id="long" value="long" name="size" />
  <span class="coral item">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.  Molestias,molestiae. Possimus laboriosam facere expedita soluta dolorum recusandae excepturi rem quam error asperiores, iste consequatur unde voluptas ex id maxime ut.
  </span>
</label>
<label class="blue box ex5" for="short">
  <input type="radio" id="short" value="short" name="size" />
  <span class="coral item">Lorem, ipsum</span>
</label>

06. Header, Content, and Footer

Stretch content and push the footer to the bottom of a fixed height container using flex-grow: 1 on the content element.

/* CSS */
.ex6 {
  display: flex;
  flex-direction: column;
  height: 500px;
}.ex6-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}/* HTML */
<div class="blue box ex6">
  <div class="coral item">Header</div>
  <div class="pink item ex6-content">Content</div>
  <div class="coral item">Footer</div>
</div>

07. Alternating Rows

Leverage the order CSS attribute to change the order of elements on the webpage. Notice, the order in HTML is the same but on the webpage the order is different.

/* CSS */
.ex7 > .row {
  display: flex;
  align-items: center;
  gap: 1em;
  width: 100%;
}.ex7 > .row > p {
  flex-grow: 1;
}.ex7 > .row:nth-child(2n) > span {
  order: 2;
}/* HTML */
<div class="blue box ex7">
  <div class="item coral row">
    <span class="item pink">:(</span>
    <p class="item yellow">
      Potter, do something. Tell them I mean no harm
    </p>
  </div>
  <div class="item coral row">
    <span class="item pink">:)</span>
    <p class="item yellow">
      I'm sorry professor. But I must not tell lies.
    </p>
  </div>
  <div class="item coral row">
    <span class="item pink">:(</span>
    <p class="item yellow">!?</p>
  </div>
  <div class="item coral row">
    <span class="item pink">:)</span>
    <p class="item yellow">Farewell, milady</p>
  </div>
</div>

08. Custom Label Placements

Expose 4 different label placements (end, start, top, bottom) by changing one line of CSS.

/* CSS */
.ex8 {
  display: flex;
}.ex8 > label {
  display: flex;
  align-items: center;
  flex-basis: 100%;
}.ex8 .item[for='start'] {
  flex-direction: row-reverse;
}.ex8 .item[for='top'] {
  flex-direction: column-reverse;
}.ex8 .item[for='bottom'] {
  flex-direction: column;
}/* HTML */
<div class="blue box ex8">
  <label class="coral item" for="end">
    <input
      type="radio"
      id="end"
      value="end"
      name="labelPlacement"
    />
    <span class="pink item">End</span>
  </label>
  <label class="coral item" for="start">
    <input
      type="radio"
     id="start"
     value="start"
     name="labelPlacement"
    />
    <span class="pink item">Start</span>
  </label>
  <label class="coral item" for="top">
    <input
      type="radio"
      id="top"
      value="top"
      name="labelPlacement"
    />
    <span class="pink item">Top</span>
  </label>
  <label class="coral item" for="bottom">
    <input
      type="radio"
      id="bottom"
      value="bottom"
      name="labelPlacement"
    />
    <span class="pink item">Bottom</span>
  </label>
</div>

Additional Resources:

CodeSandbox with all examples — https://codesandbox.io/s/8-flexbox-layouts-you-should-know-brw5h