Basics of using CSS Flexbox — Part 1

What is flexbox? Flexbox is CSS designed to simplify layouts of items on a single axis.

Photo by Branko Stancevic on Unsplash

Take for example, the following code.

<div class="row">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>

Assuming we haven’t defined any actual css for those elements, the layout will be very much like this.

1
2
3
4

By default, each “column” div will be placed underneath the previous.

But… using Flexbox, we can very easily turn this layout into a more sensible layout based on our class names. First let’s define the row class.

.row { display:flex; }

Simple right? All we’ve done here is to specify that the row div is to use the flexbox css layout module.

Now for the column class.

.column { flex:1; }

This basically means that as a child of the row element, each “column” is to take up an equal share of the row space.

So bearing those things in mind, the layout of our html will now change to something more like.