Flex Layout Tutorial: Examples

7 min readApr 24, 2022

The previous article introduced the syntax of Flex layouts and today introduces the Flex writing method for common layouts.
You will see that no matter what the layout, Flex can often be handled with a few lines of commands.

I have only listed the code, for a detailed explanation of the syntax please consult the Flex Layout Tutorial: Syntax chapter. My main references are Landon Schropp’s article and Solved by Flexbox.

1. Layout of the dice

On one side of the dice, a maximum of 9 dots can be placed.

Here, take a look at how Flex implements, from 1 to 9 points, the layout. You can check out the demo at codepen.

If left unspecified, the HTML templates in this section will always be as follows.

<div class="box">
  <span class="item"></span>
</div>

In the code above, the div element (representing a face of the dice) is the Flex container and the span element (representing a point) is the Flex item. If you have more than one item, add more than one span element, and so on.

1.1 Single item

First of all, in the case of only 1 dot in the top left corner, the Flex layout is by default left-justified on the first line, so one line of code is sufficient.

.box {
  display: flex;
}

Setting the alignment of the item will enable centre-alignment and right-alignment.

.box {
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  justify-content: flex-end;
}

Set the cross-axis alignment to move the spindle vertically.

.box {
  display: flex;
  align-items: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

1.2 Double Items

.box {
  display: flex;
  justify-content: space-between;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

1.3 Three Items

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

1.4 Four Items

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

The HTML code is as follows.

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

The CSS code is as follows.

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

1.5 Six Items

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

The HTML code is as follows.

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

The CSS code is as follows.

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

1.6 Nine Items

.box {
  display: flex;
  flex-wrap: wrap;
}

2. Grid layout

2.1 Basic grid layout

The simplest grid layout is one that is evenly distributed. The space is distributed equally inside the container, much like the dice layout above, but you need to set the autoscaling of the items.

The HTML code is as follows.

<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

The CSS code is as follows.

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2.2 Percentage layout

The width of a grid is a fixed percentage and the remaining space is divided equally between the remaining grids.

The HTML code is as follows.

<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

The CSS code is as follows.

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

3. Grail layout

Holy Grail Layout refers to the most common type of website layout. The page is divided into three sections from top to bottom: the header, the body and the footer. The body is divided horizontally into three columns, from left to right: the navigation, the main column and the secondary column.

The HTML code is as follows.

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

The CSS code is as follows.

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* The width of the two sidebars is set to 12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* Navigation to the far left */
  order: -1;
}

In the case of small screens, the three columns of the torso automatically become vertically stacked.

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

4. Layout of the input box

We often need to add hints to the front of the input box and buttons to the back.

The HTML code is as follows.

<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

The CSS code is as follows.

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

5. Suspension layout

Sometimes it is necessary to add a picture bar to the left or right of the main bar.

The HTML code is as follows.

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

The CSS code is as follows.

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

6. Fixed bottom bar

Sometimes there is too little content on a page to fill the height of a screen and the bottom bar is raised to the middle of the page. This is where a Flex layout can be used so that the bottom bar always appears at the bottom of the page.

The HTML code is as follows.

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

The CSS code is as follows.

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

7. Flow layout

The number of items per line is fixed and will automatically branch out.

The CSS code is as follows.

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

(end)

Flex Layout Tutorial: Examples

1. Layout of the dice

1.1 Single item

1.2 Double Items

1.3 Three Items

1.4 Four Items

1.5 Six Items

1.6 Nine Items

2. Grid layout

2.1 Basic grid layout

2.2 Percentage layout

3. Grail layout

4. Layout of the input box

5. Suspension layout

6. Fixed bottom bar

7. Flow layout

Written by Sevenall Bin