CSS Flexbox Guide

CSS Flexbox allows you to design responsive layouts without having to do complex positioning or floating elements. While it may seem intimidating at first, let’s break down some aspects to make it a little easier to understand.

To start off you need to apply a display of flex to your container element.

flex-direction

flex-direction allows you to pick the direction you want your child elements to be arranged in. The options available are: row, row-reverse, column, and column-reverse. This will change the orientation of the flex container’s main axis.

row is the default behavior, left to right. Row-reverse switches the order of the children. Column will align the children to be top to bottom instead of left to right. Column-reverse will align them bottom to top.

Try commenting and uncommenting the other options!

flex-wrap

flex-wrap will change when or if child elements are allowed to stay on the same line or move to new ones.

The nowrap option is the default and says all flex items will be on the same line. The wrap option will move child elements onto multiple lines, top to bottom. And lastly the wrap-reverse does the same as wrap but bottom to top.

Test out some other options!

flex-flow

flex-flow is shorthand for the flex-direction and flex-wrap properties. You define the options with a space in-between. The default options for each remain the same.

Play around and do different combinations!

justify-content

justify-content allows you to pick how your elements are aligned along its main axis. You can center them with the center option, align them to the start of the container with flex-start, the end with flex-end, or use space-between, space-around, or space-evenly for different centered / spaced options. start and end work by aligning based on the container’s writing-mode direction instead of it’s flex-direction. left and right work by moving child elements either to the left or right edges of the container, based on flex-direction. The safe and un-safe additional keywords will disallow or allow you to push elements so they will be positioned off-screen.

Uncomment a single option to see the changes!

align-items

align-items changes how flex items are positioned along their cross axis (opposite of their main-axis). By default the elements are stretched out to fill the line with stretch, You can center them with center, align them at the start of the container with flex-start, or the end with flex-end. baseline positions the elements so that their baselines are aligned. start and end work by aligning based on the container’s writing-mode direction instead of it’s flex-direction. The safe and un-safe additional keywords will disallow or allow you to push elements so they will be positioned off-screen.

Uncomment an option and see the change!

align-content

align-content allows the different lines of a flex container to be positioned similarly to justify-content. You can center the lines with center, start them at the start of the container with flex-start, the end with flex-end, allow them to automatically stretch and fill the space with stretch, or use space-between, space-around or space-evenly for different centered/spaced options.

align-self

If you want specific children to be positioned differently along their cross-axis you can use the align-self property on them. flex-start and flex-end position them along the container’s start or end respectively. center will position the element in the center, baseline will position along with the other element’s baselines, and stretch will stretch the element to fit the line.

order

You can also pick the order child elements are displayed by giving those children an order property with a corresponding number.

flex-grow

When you want flex items to grow larger than others you can give them the flex-grow property. By default all items take up the same amount of space, let’s say 1, if you give one item a flex-grow value of 2, they would try to take up twice the space as the others.

flex-shrink

flex-shrink works with flex-grow and flex-basis, allowing items to shrink if necessary.

flex-basis

flex-basis sets the initial size of the flex item before remaining space is distributed.

Try changing the flex-basis to a larger or smaller amount!

flex

flex is the shorthand property for flex-grow, flex-shrink, and flex-basis combined. The default value is 0 1 auto. The second and third arguments are optional. Using flex is preferred rather than setting the properties individually.

Flexbox can be a lot of information to take in at once. I would recommend playing with these CodePens and starting up your own to experiment with different combinations of these properties.