Create a Free 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.
This is the beauty of flexbox.
You can use conventional CSS properties like float and text-align inside child containers.
We present two different methods of creating multiple columns using flexbox.
The first was used in our 500 series templates to create 4 equal columns on the front page.
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>
This method is ideal when 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 second method 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 second method uses gap: and the first uses padding.
div.flex-container {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap: 2dvw;
padding : .5dvw 10dvw;
}
div.flex-container .left,
div.flex-container .middle,
div.flex-container .right {
flex : 1;
padding: 0
}
3 columns modern-design page <div class="flex-container"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>