Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

Learn Common CSS Flex Patterns In 10 Minutes

Flex has crystallized itself as the modern day standard for designing responsive layouts.

Hey devs! Support our free ad-less tutorials – get coding books (discounts applied for Semicolon readers)

As a beginner, looking at all of the flex box properties from complete CSS flex guide tutorials, you probably think flex is something that will be difficult to memorize.

However, after spending hours writing flex code, you'll start to notice that you're repeating the same properties and values over and over again.

The 3 Common Flex Prolems are: centering, making grids and n-column layouts

• Centering: Cenetring content within a flex element.
• Creating Grids: Imitating grid-based layouts.
• n-Column Layouts: Columns are the basis of many websites and apps.

For each layout type, there is a flex trick, a combination of CSS properties that also assumes and follows specific element structure.

This CSS flex tutorial will explore some of the most common patterns which are:

Enabling flex on an HTML element (which alone takes 3 property-value combinations if you want your content centered by default, which is my personal preference,) centering items in a flex box container, creating grids with flex, and creating n-width column layouts.

If you can master these 3 patterns, you'll be able to create pretty much anything with flex.

In order to enable flex on an element and align items in the center both vertically and horizontally, I always end up starting with this setup:

display: flex;
justify-content: center;
align-items: center;

Packaging your flex properties into 1-letter classes

When learning something for the first time, I'm not a fan of starting with frameworks. Especially CSS frameworks. But there is a reason CSS frameworks exist. They give you a pattern, which in the long run will save you a lot of time.

But we don't have to download or integrate any CSS frameworks in order to use the same problem-solving approach frameworks use - to think in useful patterns.

Let's create a "home made" CSS framework of our own with just 12 lines of CSS.

Instead of rewriting same properties for each element, pre-baked classes can save you hours of development time. If you keep each class name to a one or two letters, you can significantly reduce amount of flex code:

.f { display: flex; }
.r { flex-direction: row }
.c { flex-direction: column }

/ vertical stuff /
.v { align-items: center }
.vs { align-items: flex-start }
.ve { align-items: flex-end }

/ horizontal stuff /
.h { justify-content: center }
.hs { justify-content: flex-start }
.he { justify-content: flex-end }

/ wraps - we're going to need it! /
.w { flex-wrap: wrap; }
.wr { flex-wrap: wrap-reverse; }

/ because this is arguably the prettiest spacing/
.s { justify-content: space-around }

Of course there are many more flex properties...but common ones can be counted on fingers of both of your hands. Literally there are like the same 10 properties you'll find yourself using a lot.

Add more if something's missing. The idea is to just use these simple class names on all of your HTML elements to build with flex. (Instead of typing and retyping long flex property names in 100s of your classes.)

Let's make a layout with centered item:

To use this home-brew css "framework" let's create a centered flex item:

<main class = "f v h">
  <section class = "f v h">
    I am centered
  </section>
</main>

For designs that need to flow in row direction:

<main class = "f r"></main>

For column direction:

<main class = "f c"></main>

Now let's make a flex with row direction that wraps columns:

<main class = "f r w"></main>

Add or replace any of the CSS classes we created to get the align you're looking for. Doing it this way will dramatically reduce time it takes to make css flex layouts.

Wrapping items (to make Flex content grid-like)

At one point you'll want to wrap flex lines at an interval after a number of items.

> Flex content is just one long line that can be broken, it doesn't have natural properties for controlling rows or columns as you would in a grid.

This is done in order to make flex layouts grid-like (column-based.)

There are two common ways of doing that.

Wrapping with flex-wrap: wrap (or flex-wrap: wrap-reverse)

Set your flex container to flex-wrap: wrap:

<body>
  <section class = "f w">
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
  <section>
</body>

Then set width of the container and #columns section { } to values you need.

For example to make a 2 column design, set container to 1000px and each item to about 500px (half of the container or slightly less to avoid extra padding or borders.) Each flex item will wrap forming a two-column layout.

Using a flex item as a breaker to create column-based layouts

Remember css flex is just one line of content so we can't access grid-like properties to create multi-column layouts with flex.

Another way of creating multi-column layouts is to use CSS to assign "every Nth" child item to act as a line break.

Creating 2-column CSS flex layout

If you need a 2-column layout you can use following code:

<body>
 <div id = "container" class = "f r w">
  <div>1</div>
  <div>2</div>
  <div>break</div>
  <div>3</div>
  <div>4</div>
  <div>break</div>
  <div>5</div>
  <div>6</div>
  <div>break</div>
 </div>
</body>

Then add this to your CSS:

#container div:nth-child(3n) {
    width: 100%;
}

This way every 3rd item becomes a line break. Effectively making a two-column layout. You can make 3 column based layouts as follows.

Creating 3-column (or N-column) layouts with Flex:

Need 3 columns? No problem just use 4n (The count is always column+1):

#container div:nth-child(4n) {
    width: 100%;
}

Is this a complete flex guide? Of course not! But it has a few tree branches I've picked up over the years working with flex, and I hope it helps someone who's just starting to learn CSS flex.

Hey devs! Support our free ad-less tutorials – get coding books (discounts applied for Semicolon readers)

These techniques are commonplace and pretty much all there is to making basic layouts with flex. It seems like every time I work with Flex centering and aligning items either to start, end or middle of container is one of the most common patterns I encounter.

Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

Create Semicolon account to write or meet other learners and web developers on our timeline! Sign up here!