Simple CSS Flex Tutorial

Check out these coding books CSS , JavaScript and Python. Some of them are also available on Amazon if you need extra desk reference.

Flex is a set of CSS properties that help web designers create layouts. Officially Flex is actually called Flexbox which stands for flexible box. It automatically adjusts layout spacing.

Flex automatically adjusts dimensions of your items inside parent container based on browser size, size of neighboring items and space between them. This makes flex an ideal tool for creating responsive website layouts.

Learning as many flex property/value combinations is essential for understanding how it works. So let's get started!

Parent And Items

Flex block consists of parent container and nested items. Some flex properties should be applied only to parent. While others only to items.

Main-axis and Cross-axis

Thinking in flex involves knowing about main-axis and cross-axis. Main-axis - the horizontal one - is the default. Placing items inside flex container will automatically align them against main-axis.

CSS Flex properties justify-content and align-content

Get used to these two properties and make them your second nature!

Along Main-axis you'll use justify-content property for creating spacing between items. On Cross-axis you will use align-content property to do the same vertically.

However align-content only works if there are multiple rows of flex items. (That is, you have more items that can fit into the width of your container and "wrap" onto the next line. You'll need to apply flex-wrap: wrap in order for your items to jump to next row.)

How To Enable Flex On An HTML Element?

Flex can be applied to basic HTML elements that deal with dividing or sectioning your layout into separate blocks.

To make an HTML element behave as a flex container simply apply display:flex property to parent:

HTML:

<div id = "flex"></div>

CSS:

div#flex { display:flex }

Populating flex container with items

Now all you have to do is simply nest your flex parent container with as many items as you need.

<div id = "flex">
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>

You will need to apply some basic styles to each item depending on what you're trying to make. That's entirely up to you! In this example box-shadow property was used to make the item stand out.

By default flex will justify content left (value flex-start). This means the value flex-start is applied to justify-content by default.

Now onto the fun part. Aligning items!

Flex has a set of unique values you can assign to justify-content property. And for the most part, this is what designing layouts with flex is all about. It's choosing amount of space you want to have between your items.

Let's try this simple example first.

I edited div#flex style in the following way:

div#flex {
    display: flex;
    justify-content: space-evenly;
}

Simply adding justify-content: space-evenly; modified our items as follows:

Now there is a multitude of different values you can apply here.

They all produce similar but slightly different spacings.

In the next section of this tutorial I'll go over them with a flex diagram that can help you to quickly understand how they all work.

Using justify-content

This flex diagram makes it easy to understand how values set to justify-content work. To the left you see each value name and to the right the effect it has on spacing between your flex items:

Description of all justify-content values:

• stretch Stretch all items to fill 100% of the parent's width
• space-between Equal space between all items. No space on outside corners.
• space-around Equal space around all items. Half space on the outside corners.
• space-evenly Equal space around all items and parent edges.
• center Center all items. No space between items.
• flex-end Align all items right.
• flex-start Align all items left. (Default.)

Keep in mind flex-direction: row is the default setting. This is why all items are justified on the horizontal (main) axis. However, it's possible to swap axis by setting flex-direction to column.

Doing this will not affect justify-content in any different way -- it simply gets swapped with cross-axis and becomes the vertical axis -- items will be now spaced vertically. (See next example.)

Using justify-content with flex-direction: column

This is the same example as above. All we did was set flex-direction property to column.

Using align-content to create vertical spacing

There may be some confusion at why align-content isn't working for your layout. Many try applying this property to parent in hopes of using it as an opposite to justify-content.

But there is one gotcha! This property requires more than one row. Otherwise there is no effect.

To make sure your items wrap to the next line, set flex-wrap property to wrap value in your main container first.

Here 12 items were strategically used to fill up an equal number of lanes.

Let's apply stretch value to align-content property:

This creates a grid-like layout.

Other Flex References

CSS Flex Tutorial the complete css flex tutorial
Less Common CSS FLex Patterns In 10 Minutes how to make grid and column-based layouts with flex

Learning flex is an ongoing process, and there is no "one fits all" solution for creating responsive layouts with css flex. Learn from multiple resources.