Working with Flexbox CSS

When it comes to building websites today, you can’t turn around without finding some sort of pre-build responsive library/framework. Almost all of these are build off of some combination of the following: CSS reset, percentage margins/paddings/widths, and media queries (to determine browser size and give break points).

The problem I have run into with these is that if you want to play with margins or padding you generally end up breaking something. With using Flexbox CSS, margins and padding are easy, and the browser handles all of the funny math.

Example 1:

CSS

section {
    display: flex;
}
.column {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

HTML

<section>
    <div class="column">Test</div>
    <div class="column">Test</div>
    <div class="column">Test</div>
    <div class="column">Test</div>
    <div class="column">Test</div>
    <div class="column">Test</div>
    <div class="column">Test</div>
    <div class="column">Test</div>
    ...
</section>

With this simple bit of code, you can have as many columns as you wish, provided you have enough room for content, margins and padding.
CSS

.column {
    margin: 10px;
    padding: 5px;
}
.column:nth-of-type(2n) {
    margin: 10px 20px;
}
.column:nth-of-type(3n-1) {
    padding: 5px 15px;
}

With this bit of code, you can add margins, without messing anything up and the browser just auto adjusted everything for you.

This is still a new technology, but all major browsers support this, and IE10+ is buggy. But with a new library, it could be used to make very clean and beautiful code.

Libraries/Resources

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s