Creating Columns with Flexbox

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.

Add box-sizing: border-box to the top of your style sheet and adjustments for content, borders or box-shadow and padding are made automatically.

Interior Pages

The interior pages use slightly different code than the front page.

We start with a container division:
<div class="flex-container">

Child Containers

Then we add for the modern design page 3 child containers inside flex-container named as <div class="column"> defined in the CSS as flex : 1;, which creates 3 equal size columns.

Flexbox allows you to use use conventional CSS properties like float and text-align inside child containers.

This page demonstrates the procedure to create columns of different widths.

The left column uses <div class="column-2"> and the CSS flex: 2; which means make this column twice the size of flex :1;

The HTML

3 columns modern design page
<div class="flex-container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>

The CSS

div.flex-container { 
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap: 2dvw;
padding : 0 0;
} 

div.flex-container .column { 
flex : 1;
padding: 0
}