| Coding Tutorials

flexboxCreating 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:

<div class="container">
    <div class="column">Column A</div>
    <div class="column">Column B</div>
    <div class="column">Column C</div>
</div>

Step #2. CSS

Create a CSS file with the following code:

.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;
}

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:

<link rel="stylesheet" type="text/css" href="/path/to/file.css" />

Step #3. See it in action

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

flexbox

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:

flexbox

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.