Sadness' Quick Guide to Flexbox

I used to avoid using flexbox because it was an ‘unknown’ to me, but over time I used it and realized how actually simple it is compared to grid (imo). It’s frustrating that one of the best known guides is very complete but super overwhelming for a beginner!

Do you know basic HTML and CSS?
Are you comfortable with using <div> </div> tags?
Then let’s get started!

Here are two ordinary divs:

one
two
<div class="item">one</div>
<div class="item">two</div>

<style>
  .item {
  background-color:teal;
  border:1px solid black;
}
</style>

By default, divs are block-level items which means they take up all available width in their container.

If you wanted the divs to go next to each other, you just have to wrap them both in a div, and make it display:flex;

one
two
<div class="my-wrapper">
<div class="item">one</div>
<div class="item">two</div>
</div>

<style>
  .item {
  background-color:teal;
  border:1px solid black;
 }
  .my-wrapper {
    display:flex;
  }
</style>

Now both divs are on the same line! (By default, flex items are inline. This is why the divs shrunk.)

You can add as many divs as you like in a wrapper. This makes it easy to create entire galleries of items that flow seamlessly. Like so:

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

If you have too many items and not enough to display them all, your flex items will eventually run off of the page:

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

To fix this, just add flex-wrap:wrap; to the wrapper - this allows the items to flow naturally onto the next line.

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

This is especially useful for designing mobile-friendly layouts, because whenever the browser shrinks in width, the items will naturally fill the remaining space. This only works if each item is smaller than the wrapper’s width.

If each item is equal to or greater than it’s wrapper’s width, it will fill all remaining space, like a stack.

item
item
item
item

If you want to add equal spaces between the items that are in the flexbox, just add a margin-right and margin-bottom value to the flex items. Below the items are spaced with 10px;

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

Aligning Flex Items

If you have some flex items with left-over space in the wrapper, you can change the justify-content property on the wrapper to align them in specific ways. In the below example, the wrapper is in pink to highlight the extra space:

box
box
box

Now if we add justify-content:center; to the wrapper:

box
box
box

This works for justify-content:left; and justify-content:right; values too.

But there's also justify-content:space-apart; which spaces the items equally apart:

box
box
box

And you can also use justify-content:space-evenly; to space the items evenly across the wrapper:

box
box
box

Ordering Flex Items

Something even-more mobile friendly is the fact that you can change the order of the flex items. So if you have a sidebar, for example, it probably looks a little like this:

sidebar
content

Which means if the page was resized narrowly with flex-wrap:wrap; on, the sidebar would stack on top of the content (since it comes first in the HTML):

sidebar
content

On mobile views, you might want to reverse this order. Just pop this into a media query:

  .my-sidebar {
    order:2;
  }
  

This moves the .my-sidebar div to the second position:

sidebar
content

Stretching Flex Items

But notice how the sidebar looks kind of weird all narrow like that? If you want a div to fill the width of its wrapper even if there isn’t enough content to fill it, you can use flex-grow:1; on that flex-item. This makes it take up all available space in its wrapper.

sidebar
content

Conclusion

That's the basics! If you want to learn more, you can find a full listing of the flexbox properties and values here.

You can also try the game Flexbox Froggy to brush up on your styling, but I recommend trying this after you've had a chance to play around with it a bit.