How to use Flexbox for beginners

Reading time: 2 minute(s)

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:

See the Pen Untitled by Sadness (@sadness97) on CodePen.

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;

See the Pen Flexbox-2 by Sadness (@sadness97) on CodePen.

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:

See the Pen Flexbox-3 by Sadness (@sadness97) on CodePen.

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

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

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.

See the Pen Untitled by Sadness (@sadness97) on CodePen.

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;

See the Pen Flexbox-5 by Sadness (@sadness97) on CodePen.

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.

Here’s a nice visualization of how it works:

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:

See the Pen Flexbox-7 by Sadness (@sadness97) on CodePen.

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).

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 (bottom) position.

See the Pen Flexbox-7 by Sadness (@sadness97) on CodePen.

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.

See the Pen Flexbox-8 by Sadness (@sadness97) on CodePen.

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.

2 thoughts on “How to use Flexbox for beginners”

Leave a Comment