CSS

An Interactive Guide to CSS Flex Box

In the past, making HTML elements appear next to each other was a tricky proposition. It usually relied on floats, often resulting in some strange behaviours. Today, we have flexbox, which is the modern way lots of websites present their content. Below we present our overview of the CSS flexbox, along with a generator to let you generate the layout style you want for your container elements.

Create your flexbox

align-items:

justify-content:

flex-direction:

For items..

flex-grow:

1
2
3
4

With flexbox, the container element has to have display: flex;. We can also do inline-flex, for flexboxes inline with the text.

css Copy
.container { display: flex; align-items: normal; flex-direction: row; justify-content: flex-start; }
html Copy
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
css Copy
.item { flex-grow: 0; }

Properties for Containers

For your reference, here are the individual properties and the effects they have on a flex box configuration. For all of these examples, except flex-wrap itself, we use flex-wrap: wrap;.

justify-content

This justifies content along the flex-direction axis.

1
2
3
css Copy
.container { justify-content: start; }

align-items

This justifies content along the axis perpendicular to the flex-direction axis for a single row of items.

1
2
3
4
css Copy
.container { align-items: normal }

flex-direction

This sets then main axis of the flex, whether that is vertical (column) or horizontal (row).

1
2
3
4
css Copy
.container { align-items: normal }

align-content

This sets the position for all rows in a much larger box.

1
2
3
4
5
6
7
8
css Copy
.container { align-content: flex-start }

flex-wrap

This sets the position for all rows in a much larger box.

1
2
3
4
5
6
7
8
9
10
11
css Copy
.container { flex-wrap: nowrap; }

Properties for Items

Although you can affect entire collections of items with flex box, you can also call out individual items and apply styles to them in particular. Below, the examples show you how to do that.

order

When applied to an item, it gives it an order relevant to other items around it. An order of 9999 will go to the end of the flow direction. Think of this like z-index, but for flex box.

1
2
3
4
css Copy
.item { order: 0; }

flex-grow

Dictates the alignment of a particular item along the perpendicular axis to flow-direction.

1
2
3
4
css Copy
.item { flex-grow: 1; }

align-self

Dictates the alignment of a particular item along the perpendicular axis to flow-direction.

1
2
3
4
css Copy
.item { align-self: flex-start; }
Last Updated Thursday, 4 March 2021
Click to Subscribe Subscribed

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email