CSS3 Flexbox: The cool kid on the block

Flexbox, or CSS3 Flexible Box, is a super lightweight way to lay out UI components on a web page. Not only is it easy (and fun) to learn, but it makes designing for responsive screen sizes painless.

Here is a cheatsheet for using Flexbox, and some fun diagrams to illustrate the concepts.

Once you get the hang of it, Flexbox will be your new best friend.


Flexbox Terminology

Main axis: This is the primary axis along which flex items are distributed. This will change depending upon the value of flex-direction.

Main-start and Main-end: Flex items are placed within a container beginning at main-start and resting at main-end.

Main-size: A flex item’s width or height is the main size. This depends upon which is the main direction. The main size property will either be ‘width’ or ‘height’.

Cross axis: This is the axis that is perpendicular to the main axis. The direction depends on the main axis direction.

Cross-start and Cross-end: Items are placed beginning at the cross-start side of the flex container and move towards the cross-end side.

Cross-size: The width or height of a flex item, which again depends on the main direction. This property will be either ‘width’ or ‘height’.


Flex Container Properties

display: Defines a flex container. It can be inline, or block, depending on the value.

.container {
display: flex | inline-flex;
}

flex-direction: Establishes the main-axis, defining the direction flex items are placed in your flex container.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap: Normally, flex items will attempt to fit onto one line. This can be changed such that flex items start wrapping to a new line when the width decreases.

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow: This is a combined version of flex-direction and flex-wrap, which together define the flex container’s main and cross axes. The default value is row nowrap.

flex-flow: {flex-direction} | {flex-wrap};

justify-content: This defines the alignment of flex items along the main axis. It helps the developer distribute the extra white space.

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items: This defines how flex items should be laid out along the cross-axis.

.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content: This aligns a flex container’s internal boundaries when there is extra white space in the cross-axis. This won’t affect the content when there is one single line.

.container {
align-content: flex-start | flex-end | center | space-between | space-around;
}

Flex Item Properties

order: By default, items are laid out in the order in which they appear. However, you can control the order the items appear in by giving them an order value.

.item {
order: {integer};
}

flex-grow: Describes how the flex items will grow. This property will accept a value that serves as a proportion. This indicates how much of the available space inside the flex container each item should take up. By default, all flex items have a flex-grow set to 1. IF a child has a flex-grow of 2, the remaining space will take up twice as much space as the others.

.item {
flex-grow: {number}; // default = 0
}

align-self: Allows items to override the default alignment.

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex-shrink: Defines the ability for a flex item to shrink.

.item {
flex-shrink: {number};
}

flex-basis: Defines the default size of an element prior to distributing the remaining space. It can be a length (3rem, etc.) or a keyword. The auto keyword means “use my width and height for this value”. The content keyword means “check out my content and size appropriately.”

.item {
flex-basis: {length} | auto;
}

flex: Shorthand for flex-grow , flex-shrink , and flex-basis . The second and third parameters aren’t required.

.item {
flex: none | [ {flex-grow} {flex-shrink} || {flex-basis}];
}

Wanna Practice?

If you’d like to practice Flexbox, here are some fun games to teach you the concepts.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.