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.

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

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.

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.

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

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

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.

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.

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.

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

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

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.”

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

Wanna Practice?

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

Software Engineer @ LogMeIn by day, cat Mom by night. Also a full-time Bibliophile. I enjoy all things Front-end & Design