Dark Mode Toggle
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.
The front and interior pages use the same code.
We start with a container division:
<div class="flex-container">
Then we add for the front page 3 child containers inside flex-container named as <div class="column">
The beauty of flexbox is that you can use conventional CSS properties like float and text-align inside child containers.
Note: Be sure to add box-sizing: border-box to the top of your style sheet.
3 columns Flexbox <div class="flex-container"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
div.flex-container {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap: 2dvw;
padding : .5dvw 10dvw;
}
div.flex-container .column {
flex : 1; /*Equal Columns*/
padding: 0
}