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.
We used two methods for creating columns on this mini site.
The front page and the four columns use a slighlty different method than was used on the interior pages.
This is the beauty of flexbox.
You can use conventional CSS properties like float and text-align inside child containers.
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 a container division.
div.container {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
padding : 1dvw 10dvw;
}
div.container .column-front {
flex : 25%;
padding: 0 1dvw
}
4 columns front <div class="container"> <div class="column-front"></div> <div class="column-front"></div> <div class="column-front"></div> <div class="column-front"></div> </div>
The interior pages use different code because the wrap procedure isn't as demanding.
The front page and it's 4 columns needed to wrap to two columns, thus we used a width of 25%.
We then used a media query to change their width to 50% and change the layout to 2 columns.
The width of the interior pages was set using flex: 1; which tells the browser to create columns of equal size and allow them to shrink and grow as needed.
A different method of spacing was also used. The interior pages use gap: and the front pages use padding.
div.flex-container {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap: 2dvw;
padding : .5dvw 10dvw;
}
div.flex-container .column {
flex : 1;
padding: 0
}
3 columns modern-design <div class="flex-container"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>