CSS: Flexbox
The “Flexible Box” or “Flexbox” layout mode offers an alternative to Floatsfor defining the overall appearance of a web page. Whereas floats only let us horizontally position our boxes, flexbox gives us complete control over the alignment, direction, order, and size of our boxes.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflexbox-layouts-7abd58.png&width=768&dpr=4&quality=100&sign=9ee5abb4&sv=1)
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflexbox-vs-floats-418bf3.png&width=768&dpr=4&quality=100&sign=f18ad09d&sv=1)
flexbox overview
Flexbox uses two types of boxes that we’ve never seen before: “flex containers” and “flex items”. The job of a flex container is to group a bunch of flex items together and define how they’re positioned.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-container-and-flex-items-6234bb.png&width=768&dpr=4&quality=100&sign=8de9aea4&sv=1)
flex containers
This enables the flexbox layout mode—without it, the browser would ignore all the flexbox properties that we’re about to introduce. Explicitly defining flex containers means that you can mix and match flexbox with other layout models (e.g., floats and everything we’re going to learn in Advanced Positioning).
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fenabling-flexbox-dd3b59.png&width=768&dpr=4&quality=100&sign=11b29fa5&sv=1)
aligning a flex item
After you’ve got a flex container, your next job is to define the horizontal alignment of its items.
This has the same effect as adding a margin: 0 auto
declaration to the .menu
element. But, notice how we did this by adding a property to the parent element (the flex container) instead of directly to the element we wanted to center (the flex item). Manipulating items through their containers like this is a common theme in flexbox, and it’s a bit of a divergence from how we’ve been positioning boxes thus far.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-justify-content-alignment-ea129c.png&width=768&dpr=4&quality=100&sign=839bf334&sv=1)
Other values for justify-content
are shown below:
center
flex-start
flex-end
space-around
space-between
Try changing justify-content
to flex-start
and flex-end
. This should align the menu to the left and right side of the browser window, respectively. Be sure to change it back to center
before moving on. The last two options are only useful when you have multiple flex items in a container.
grouping flex items
Flex containers only know how to position elements that are one level deep (i.e., their child elements). They don’t care one bit about what’s inside their flex items. This means that grouping flex items is another weapon in your layout-creation arsenal. Wrapping a bunch of items in an extra <div>
results in a totally different web page.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fgrouping-flex-items-1bb642.png&width=768&dpr=4&quality=100&sign=40124622&sv=1)
cross-axis (vertical) alignment
his is something that’s simply not possible with floats.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Falign-items-vs-justify-content-4d380e.png&width=768&dpr=4&quality=100&sign=f190f0a4&sv=1)
The available options for align-items
is similar to justify-content
:
center
flex-start
(top)flex-end
(bottom)stretch
baseline
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-align-items-26abfd.png&width=768&dpr=4&quality=100&sign=a8e0a534&sv=1)
Most of these are pretty straightforward. The stretch
option is worth a taking a minute to play with because it lets you display the background of each element. Let’s take a brief look by adding the following to styles.css
:
wrapping flex items
To create a grid, we need the flex-wrap
property.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-wrap-b960c1.png&width=768&dpr=4&quality=100&sign=1511a874&sv=1)
flex container direction
“Direction” refers to whether a container renders its items horizontally or vertically. So far, all the containers we’ve seen use the default horizontal direction, which means items are drawn one after another in the same row before popping down to the next column when they run out of space.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-direction-9acadf.png&width=768&dpr=4&quality=100&sign=105248a6&sv=1)
Try adding the followingflex-direction
declaration to our .photo-grid
rule:
alignment considerations
Notice that the column is hugging the left side of its flex container despite our justify-content: center;
declaration. When you rotate the direction of a container, you also rotate the direction of the justify-content
property. It now refers to the container’s vertical alignment—not its horizontal alignment.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-direction-axes-b30e85.png&width=768&dpr=4&quality=100&sign=bdf2fe1&sv=1)
To horizontally center our column, we need to define an align-items
property on our .photo-grid
:
flex container order
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-direction-reverse-532d8f.png&width=768&dpr=4&quality=100&sign=260a4a25&sv=1)
The flex-direction
property also offers you control over the order in which items appear via the row-reverse
and column-reverse
properties.
flex item order
This entire chapter has been about positioning flex items through their parent containers, but it’s also possible to manipulate individual items. The rest of this chapter is going to shift focus away from flex containers onto the items they contain.
![](https://dotnetweb30-ke.gitbook.io/~gitbook/image?url=https%3A%2F%2Finternetingishard.com%2Fhtml-and-css%2Fflexbox%2Fflex-direction-vs-order-021cee.png&width=768&dpr=4&quality=100&sign=d2f00677&sv=1)
flex item alignment
We can do the same thing with vertical alignment. What if we want thatSubscribe link and those social icons to go at the bottom of the header instead of the center? Align them individually! This is where the align-self
property comes in. Adding this to a flex item overrides the align-items
value from its container:
This should send them to the bottom of the .header
. Note that margins (padding, too) work just like you’d expect.
You can align elements in other ways using the same values as the align-items
property, listed below for convenience.
center
flex-start
(top)flex-end
(bottom)stretch
baseline
flexible items
Flex items are flexible: they can shrink and stretch to match the width of their containers.
The flex
property defines the width of individual items in a flex container. Or, more accurately, it allows them to have flexible widths. It works as a weight that tells the flex container how to distribute extra space to each item. For example, an item with a flex
value of 2
will grow twice as fast as items with the default value of 1
.
That flex: 1;
line tells the items to stretch to match the width of .footer
. Since they all have the same weight, they’ll stretch equally:
Increasing the weight of one of the items makes it grow faster than the others. For example, we can make the third item grow twice as fast as the other two with the following rule:
Compare this to the justify-content
property, which distributes extra space between items. This is similar, but now we’re distributing that space into the items themselves. The result is full control over how flex items fit into their containers.
static item widths
We can even mix-and-match flexible boxes with fixed-width ones. flex: initial
falls back to the item’s explicit width
property. This lets us combine static and flexible boxes in complex ways.
We’re going to make our footer behave like the above diagram. The center item is flexible, but the ones on either side are always the same size. All we need to do is add the following rule to our stylesheet:
summary
Use
display: flex;
to create a flex container.Use
justify-content
to define the horizontal alignment of items.Use
align-items
to define the vertical alignment of items.Use
flex-direction
if you need columns instead of rows.Use the
row-reverse
orcolumn-reverse
values to flip item order.Use
order
to customize the order of individual elements.Use
align-self
to vertically align individual items.Use
flex
to create flexible boxes that can stretch and shrink.
Last updated