flex layouts

2022-04-21

Let's look at a basic flex row. It allows us to place elements horizontally, beside one another.

<div class="neat-row">
<div class="neat-item"></div> <div class="neat-item"></div> <div class="neat-item"></div> </div>

Now let's look at a basic flex column. It allows us to place elements vertically, underneath one another.

<div class="neat-column">
<div class="neat-item"></div> <div class="neat-item"></div> <div class="neat-item"></div> </div>

These basics are super useful!

But in this tutorial we want to create a flex layout as a base for our website, that would look like one of these:

I'll be focusing on layout 3 since it's conveniently above, but other layouts are made similarly.

Essentially it's just two rows, with second row being divided into columns:

Flex layouts allow to split stuff into rows and columns until you achieve the final result!

The next tutorial section might be a little difficult to follow, as we will be creating a flex column which contains a flex row inside it.

It's not particularly complex, just y'know..
nesting.

Depending on layout, you may need to start with a row or a column. For layout 3 we'll have to start with a column:

<div class="neat-column">
<div class="neat-banner"></div> <div class="neat-container"></div> </div>

.neat-banner here is a fixed height row, 80px tall

.neat-container is the row that we'll split into columns

To split .neat-container into two columns, we do practically the same thing, but use a flex-direction: row;

<div class="neat-column">
<div class="neat-banner"></div> <div class="neat-container"> <div class="neat-sidebar"></div> <div class="neat-main-area"></div> </div> </div>

.neat-container already has a flex: 1; property that causes the row to occupy remaining height. We'll now be adding more properties underneath it:

Or, if we want sidebar to use 1/4 of available width:

I hope that was somewhat easy to understand, because it's almost all that you need to know about flex layouts.

There are three more concepts left, which I'll quickly skim through – there's more to show than to explain!

Make elements wrap onto the next line if they do not fit:

Alignment!

In a row,
align-items is vertical
justify-content is horizontal

In a column,
align-items is horizontal
justify-content is vertical

See how these properties affect a row:

And finally, there's order, which is rarely used, but sometimes can be quite useful, e.g. to make sections appear in a different order on mobile devices:

There may have been some things I missed, but I rarely had to use them, so surely they aren't that important? /hj

If you're still not tired after trying to process all this, come play Flexbox Froggy! (https://flexboxfroggy.com)