Evergreen CSS Flex Layouts With Live Demos

Does the following ring a bell? You have to build this non-trivial UI layout over and over again and Google brings in the usual CSS flex (flexbox) guides to help with. But you still need to do it yourself and nothing that can be copy-pasted for a good start.

The collection here is not ambitious but does include some common CSS flex layouts with live demos and example code you can simply reuse. Filling the gaps with more content is then up to you.

Table of Contents #

Click to jump to each example.

Display flex or flexbox is still the preferred way for building web grids and layouts in 2021 and is about to stay on top for quite some time. For that reason don't feel doubtful about the evergreen demos and code samples below as they still serve very well when it comes to alignment and templating.

Basic HTML structure #

All examples share a similar HTML structure—one parent element (.parent) and several children (.child).

<div class="parent">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
  ...
</div>

The HTML markup is also present for each flex demo for convenience.

Flex Cards on a Touch Device #

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

.child {
  flex-grow: 1;
}

.child:last-child {
  width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

This use case is derived from a common flex layout where three items are displayed on a single row. Then the last card can drop on the second one full-width (responsive) when using a mobile device or narrow screens. The central point in the code is around flex-wrap: wrap set to the parent and width: 100% set on the last child.

Flex Cards with Equal Height #

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

.child {
  flex-grow: 1;
  flex-basis: 0;
}

<div class="parent">
  <div class="child">
    It is a long established fact that a reader will be distracted by the
    readable content of a page when looking at its layout.
  </div>
  <div class="child">
    Contrary to popular belief, Lorem Ipsum is not simply random text.
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
</div>

Similar to the previous flex demo you often need to display several cards on a single row with the same width and stretching their height to the tallest one. Just adding display: flex to the parent is enough to bring the stretch functionality in by default. For the flex items' equal width you will need flex-grow and flex-basis too.

Flex Cards with Content-based Height #

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

.child {
  flex-grow: 1;
  flex-basis: 0;
}

<div class="parent">
  <div class="child">
    It is a long established fact that a reader will be distracted by the
    readable content of a page when looking at its layout.
  </div>
  <div class="child">
    Contrary to popular belief, Lorem Ipsum is not simply random text.
  </div>
  <div class="child">Lorem Ipsum is simply dummy text.</div>
</div>

The cards are forced to have their height automatically adjusted based on their content. Explicitly specifying align-items: flex-start ensures that. The equal width is achieved the same way as with the previous demo.

A Flex Card with Content-controlled Width #

.parent {
  display: flex;
}

.child:last-child {
  flex-shrink: 0;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">Lorem Ipsum is simply dummy print text.</div>
</div>

Often you need a flex card to have a fluid width but also another one aside with size that respects its content. Go to this CSS flex demo example on CodePen and try to update the text and resize the screen. You will notice how the flex item on the right grows together with the text inside and doesn't shrink even when the parent container goes too narrow. To apply the effect give flex-shrink: 0 to that child—it is like saying "Don't shrink no matter what". By default, its value is 1.

Centered Flex Cards #

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

Having a centered image and text within a container both vertically and horizontally can be done by just applying some rules to the .parent alone. For this particular case, two cards are displayed in a column visually positioned in the middle of its wrapper. Don't set flex-direction: column and you will have the same result with a row instead.

Plans and Prices Flex Cards #

.parent {
  display: flex;
  align-items: center;
  height: 300px; /* or whatever make sense */
}

.child {
  flex-grow: 1;
}

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

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

A trivial flex grid for plans and prices section where the middle card is somehow bold. In the demo, all cards are vertically centered within their parent container and the middle one expands to 100% height. Three steps to note for this flex example: the parent needs a height set directly or indirectly together with vertically aligned items; flex-grow: 1 for the .child elements so that they fill the horizontal space; and align-self: stretch for the middle card to fill the remaining vertical space.

Three-column Flex Layout with Two Sidebars #

.parent {
  display: flex;
}

.child:nth-child(2) {
  flex-grow: 1;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS flex comes in very handy for webpage layouts. The current pen represents a grid with a content area and two sidebars on each side. The middle item (the content) should be wider so you can set flex-grow: 1. In the production code, you may need to set an explicit width for the sidebars.

Webpage Flex Layout with a Header, Content, and Footer #

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh; /* or whatever makes sense */
}

.child:nth-child(2) {
  flex-grow: 1;
}

<div class="parent">
  <div class="child">Header</div>
  <div class="child">Content</div>
  <div class="child">Footer</div>
</div>

A page layout with header, content, and footer sections is evergreen. You may look at it as the previous sidebars demo but on the flip side. The difference? Columns are now rows and the direction is changed to flex-direction: column. Explicitly adding heights to the flex header and footer is OK.

Webpage Flex Layout with a Header, Footer, and Sidebar #

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

.main {
  display: flex;
  flex-grow: 1;
}

.content {
  flex-grow: 1;
}

<div class="parent">
  <div class="child">Header</div>
  <div class="main">
    <div class="child">Sidebar</div>
    <div class="child content">Content</div>
  </div>
  <div class="child">Footer</div>
</div>

This page layout is a bit more complex and requires nested flexbox items. It can be built on top of the previous flex demo. The middle section (.main) is split into sidebar and content columns and represents a separate "parent" with display: flex. The .content area takes most of the space thanks to flex-grow: 1. Setting an explicit width and height to those elements in the real use case is up to you.

Flexbox Tag Cloud #

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

<ul class="parent">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Tag clouds may seem scary at first but it's actually quite straightforward to achieve with flex. The only thing you need to set is justify-content: center for the items to be centered within the row and flex-wrap: wrap to drop on a new line when running out of space.

Final Words #

Most of these CSS flex layout demos are very straightforward. Something relatively easy to achieve with the rules you can find listed and explained in any flexbox cheat-sheet on the Internet. But flexbox can build more complex grids. Usually, grids like the Mosaic view (aka Masonry) is done with some JavaScript help while flex alone can do that too.