Flexbox Layout is the best thing to happen to css since
box-sizing: border-box. It is useful in like a million ways, and it can be used to solve a lot of difficult problems with ease. It is a bit different than what you’re accustomed to though, so we’ll go through bit-by-bit; showing you an example and then the css behind it. Today we begin with the worst thing about css since the dawn of time:
By now I’m sure everyone has come up with some kind of a method for centering an element vertically within another, in fact probably more than one depending on if the container or child height is known. There’s nothing really wrong with this of course, but these approaches are universally hacky. We’ve learned how to force CSS into working how we want, but it’s always a lot of not-terribly-expressive code that comes at some cost. Let’s do it with a Flex Box layout instead.
The HTML in this pen isn’t very interesting, just
div.container>div.child. Most of the css is pretty boring too; except for these three lines in
display: flex; justify-content: center; align-items: center;
Now think back to all those times when you were like This is so stupid, I should be able to just say “center” and it should just work!.
This Isn’t Your Granddad’s Block Element
What are we looking at here? First is
display: flex, which is the line that makes our container div a flex container instead of just a boring, old block element. Flex containers size their immediate descendants quite a bit differently than a typical block. Instead of just placing blocks at 100% width, one underneath the other, they’re now working almost like inline-blocks that take up 100% of the container height. Or at least they’re arranged from left to right and are sized to fit their content.
What’s really happening here is that a Flex Container arranges its children based on two “axes” (really they’re more like rays but whatever), the Main Axis and the Cross Axis. By default when you give an element
display: flex, its Main Axis runs from left to right, and the Cross Axis runs from the top to the bottom; its children are arranged along the Main Axis and are stretched across the Cross Axis.
So next we see
justify-content: center. The justify-content attribute controls how the items in the flex container are aligned along the Main Axis. By default this is set to
flex-start, so items will be displayed along the Main Axis moving from beginning to end. Setting it to center now makes the child elements align to the center on the Main Axis. We also get really cool options like
align-items: center. As you might have already guessed, align-items is how we control the child elements’ position along the Cross Axis. By default this is set to
stretch, which is why our child elements were going to full height before when the container was turned into a flex container. Like justify-content, this can be used to align things to the beginning, end, or center of the Cross Axis.
That last pen also included a select for flex-direction, which controls the direction of the Main Axis and Cross Axis. The default is
row, which is Left to Right and Top to Bottom, but we can also change that to
column to swap the Main and Cross axes. You can also reverse them if you want, or get real crazy and swap and reverse them!
And with that, you now are capable of aligning and distributing items in a flexbox layout. But what happens if we cram too many items into the row? And come to think of it, what if you need multiple rows? In the next part, we’ll learn about how to control the way our objects scale, and how we can use that to make a column-based layout and a grid that actually behaves like a grid!