My Flexbox Website
Flexbox is just another tool that you can add to your web development arsenal.
It takes all the work out of structuring a page with multiple columns. No more left, right, middle , inner-left or inner-third and sitting with a calculator figuring margins and padding.
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)
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.
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.
div.main {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap : 2dvw; /* 2% of viewport width */
padding : 1dvw 5dvw;
div.column {
flex : 1;
}
}
<div class="main"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>