Whether it’s making your application mobile responsive or getting something to align just right, if you’ve ever worked on a UI, you probably understand the frustrations that come with CSS:
To get past whatever issues you may have experienced, you might have turned to a framework, like Bootstrap, looked to CSS Grid, or, if you’re old-school, stuck with floats. All of these options have their benefits, but, like everything in development, have some negatives. Using a framework means you have to live with importing the entirety of it into your project. CSS Grid can feel a little clunky at times, especially if you’re new to it. Floats are nice but often aren’t as expressive as they ideally could be.
This is where Flexbox comes in. To me, Flexbox sits in-between CSS Grid and floats. It offers users the flexibility and (close to the same) control that a grid would with the ease-of-use of floats when working to control how elements are arranged in a container.
You may also like:
CSS Tricks That Will Make Your Work Easier.
To start, let’s get a high-level understanding of how Flexbox works. Flexbox works off of horizontal and vertical axes (referred to as “row” and “column” respectively). Users can define which is the “main” axis and which is the “cross” axis. The main axis will determine how child elements will be aligned in the container.
For example, let’s say I have a container that holds three dummy elements, “foo”, “bar”, adn “merp”. If I were to set the main axis as “row” (horizontal), then the elements would be arranged horizontally next to one another like this (excuse the crap styling):
If the main axis were set to column (vertical), then elements would be arranged on top of one another like this:
You can set the main axis of your container
We can also reverse the flow of elements along an axis, so that “merp” becomes our first element and “foo” our third like this for a horizontal alignment:
and this for a vertical alignment:
What About the Code?
To make an element a Flexbox, you need to set its
display value to
flex, like so:
To manipulate your container’s main axis, all you need to do is set the value of
row-reverse(reverse horizontal alignment).
column-reverse(reverse vertical alignment).
So, creating a container that has column as its main axis would look something like:
Note: Flex-direction defaults to row if a value isn’t specified.
Justifying and Aligning Elements
Moving items around in a Flexbox is pretty simple (and a big reason for why I love using the tool so much). There are four main properties that control spacing within a Flexbox:
justify-content: controls how elements are spaced across the main axis of a container.
align-items: controls how elements are spaced across the cross axis of a container.
align-content: controls how elements are spaced across the cross axis of a container when there’s extra room on that axis. (I don’t use this friend all that often, but when I do, I’m happy that it’s around.)
align-self: controls how an individual element is aligned on the cross axis of a container. (This property is set on a child element and overwrites any previous alignment set for the parent element).
Justify-content takes the following values as input (all examples are centered across their cross axis):
flex-start: brings child elements to the start of the main axis.
flex-end: brings child elements to the end of the main axis.
center: pulls child elements to the center of the main axis.
space-evenly: spreads child elements on main axis with uniform space between each.
space-between: puts the first and last elements as close to flex-start and flex-end as possible and spreads middle elements uniformly between them.
space-around: adds a reasonable margin between flex-start, flex-end, and child elements, with uniform space between child elements.
Note: All of these examples have row as the main axis, but the same principles will apply to a container where column (or reverse) is the main axis.
Align-content takes the following values as input (again, all examples are centered across their main axis):
flex-start: brings child elements to the start of the cross axis.
flex-end: brings child elements to the end of the cross axis.
center: pulls child elements to the center of the cross axis.
stretch: pulls child elements to cover the cross axis.
The differences between align-content and align-items are difficult to see with just one row of child elements, so in the following examples, I’ll show you a side-by-side of the two with the same property values. (Align-content will be on the left, while align-items will be on the right.)
Note: I won’t go over
align-self, as I have with the previous examples. Just know that you can assign it to a child element inside of a flex-container and that value will overwrite any previously assigned align property.
The last property that we’re going to touch in this part is
flex-wrap. This just gives you the ability to control how a container deals with overflows of elements. The values that the property takes are:
wrap: wraps content to the next line in a container.
wrap-reverse: wraps content to the next line in a container but, shockingly, in reverse order.
nowrap: does not allow for elements to wrap in a container.
Note: If you want to save a whole line of CSS (“oohs” and “ahhhhs” all around), you can use the
flex-flow property to specify
flex-wrap. similarly to how you would specify that you want top and bottom and right and left margin, border, or padding to be the same. For example, if you wanted to have a container that had a vertical main axis and that wrapped in reverse, you could write:
Here, the first “argument” is the value for
flex-direction, while the second is the value for
That finishes up this introductory tutorial to Flexbox in CSS. In later parts of this series, we’ll be going over some more complicated topics and putting what we’ve learned into practice to build a basic layout for a site.