Flexbox in CSS to Make Columns

Creating columns can be a tricky task in webdesign.

For many year webdesigners used tables to show content in columns. More recently, designers have been using CSS floats.

Flexbox is a CSS property that makes it possible display content in columns without the need of using floats or tables.

In this tutorial, we’ll show you how to get started with this useful CSS feature.

Step #1. HTML

Create an HTML file with the following code inside the body tag:

{codecitation html}<div class=”container”>
<div class=”column”>Column A</div>
<div class=”column”>Column B</div>
<div class=”column”>Column C</div>
</div>{/codecitation}

Step #2. CSS

Create a CSS file with the following code:

{codecitation css}.container{
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flexbox;
}
.container > .column{
margin: 0 5px;
height: 50px;
background: gray;
color: white;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
box-flex: 1;
}{/codecitation}

The prefixes in the CSS above are designed to add support for specific browsers:

• -webkit- for Chrome and Safari
• -moz- for Firefox
• -ms- for Internet Explorer 10

Now, inside the head tag of your HTML file, add a link tag pointing to the CSS file:
{codecitation html}<link rel=”stylesheet” type=”text/css” href=”path/to/file.css” />{/codecitation}

Step #3. See it in action

Open your HTML file in a browser. The end result should look like the next screenshot:

If you edit your HTML from Step 1 and add a new div with the column class, the four blocks will automatically use the same width: