Creating Easy Fluid Layouts with Flexbox

Easy

 

I see a lot of designers and developers jumping ship to frameworks and that is commendable because it makes life easier can sometimes be better than hand written code. For dinosaurs like myself I like to write code. Now CSS isn’t technically code so my horse is not that high. What I really mean is that when you talk about technology hands on experience is essential and that means the stuff out front as well. Even though frameworks are dominating developers and designers should be able to write code. It’s easy to just use Bootstrap, I do but I love using Flexbox as one of my layout tools. It makes me a less stressed out and less of a swear word sayer.

Now I have been using floats and clears to arrange my divs since I started writing code for websites. Now these days I have moved on to using Bootstrap for all the small details and some decoration. We still however use the clears and the floats. Well no more, we are no longer in the dark ages. These days for the web we have things like Flexbox to make life easier. With a few lines of CSS I have full control of the elements in my page.

I am going to go through a quick tutorial using Flexbox. where will do some basic layout. Below is the HTML and CSS we are looking at:

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

<div class="flex-container">
  <header>Stop. Stop! You keep saying that word - danger... danger! No and I have never used that word. I said things were complicated. And then you flew off the handle! 
  </header>
  <div class="flex-item big-item">It's complicated and I don't wish to discuss it. It's none of your concern. You know what, let's just say that I have a hell of a lot more on my mind, right now, than thinking about buying a damn car wash. Okay? So if you could just... please. 
  </div>
  <div class="flex-item small-item">Gus is gonna make his move. I don't know when, I don't know where or how. All I know is it's gonna happen. Powerless to stop him. </div>
  <footer>
    I have been waiting. I've been waiting all day. Waiting for Gus to send one of his men to kill me. And it's you. Who do you know, who's okay with using children, Jesse? Who do you know... who's allowed children to be murdered... hmm? Gus! He has, he has been ten steps ahead of me at every turn. And now, the one thing that he needed to finally get rid of me is your consent and boy he's got that now. He's got it. And not only does he have that, but he manipulated you into pulling the trigger for him. 
  </footer>
</div>

<script type="text/javascript" stc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

CSS

*{
  color: white;
  font-weight: bold;
  font-size: 1em;
}

.flex-container {
  padding: 0;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  flex-wrap: wrap;
  /*flex-direction: column; makes them verticle */
  justify-content: center;
}

.flex-item {
  background: green;
  padding: 5px;
  width: 20%;
  margin: 10px;
  text-align: center;
}

.big-item {
  flex: 2 0 0;
}

.small-item{
  flex: 1 0 0;
}

header, footer{
  background: brown;
  font-size: 1.25em;
  text-align: center;
}

Now we start to with our flex-container element. We add the flex attribute for the display. That will tell the browser that we will be using Flexbox. That will turn all of the units within the container into flexible elements. When you create the flex-container you start on an X axis. You can set it to display vertically by setting the flex-direction to column. You can set it to row but it is set to that by default. I setup the header and the footer for better integration with the flexbox elements.

The two items in the middle will serve as the two sizing items. We set the flex to 1 0 0 on the smaller-item and we set the bigger-item to 2 0 0. The result is a div twice as large as the other. We also set the align-items to center in the flex-container so that both items are centered into out layout sandwich. That’s the quick and easy of it. Seriously… that’s it! I love Flexbox so much.

So in conclusion Flexbox is awesome. The best part about it is that now with all the newer browser version starting at IE 10, Firefox 35, and Chrome 40 and up Flexbox works. Added bonus is that it will work without prefixes muddying up your code. So let’s have a celebration!

Example

See the Pen PwRNaJ by George Offley (@georGEO1989) on CodePen.

Here’s some links!

Flexbox CheatSheet

More Info on Flexbox

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply