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>
display: flex;
flex-direction: row;
gap: 10px;
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>
display: flex;
flex-direction: column;
gap: 10px;
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:
this is row 1
this is row 2
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
display: flex;
flex-direction: column;
gap: 10px;
height: 80px;
flex-shrink: 0;
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:
flex: 1;
display: flex;
flex-direction: row;
gap: 10px;
width: 175px;
flex-shrink: 0;
flex: 1;
Or, if we want sidebar to use 1/4 of available width:
flex: 1;
display: flex;
flex-direction: row;
gap: 10px;
flex: 1;
flex: 3;
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:
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
width: 120px;
width: 120px;
width: 120px;
width: 120px;
width: 120px;
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:
order: -1;
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)