How Easy Is It?
Being a Minimalist myself, I wanted to demonstrate how EASY flexbox can be when used to create columns.
I've possibly carried the idea over, to a fault in this demonstration, but I'm hoping to get the point across to beginners.
I've built this entire mini site using one parent division and one single child division for creating the columns. (footer not included)
Child Containers
This is the beauty of flexbox.
You can use conventional CSS properties like float and text-align inside child containers.
This page is a demonstration of just that procedure.
Oh No! 4 Columns?
The four columns on the front page were quite a bear using conventional CSS. Not so with flexbox.
We have 4 equal columns nested in the main division.
The CSS
div.main {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap : 2dvw; /* 2% of viewport width */
padding : 1dvw 5dvw;
div.column {
flex : 1;
}
}
The HTML
<div class="main"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>