February 04, 2019

Flexbox is awesome. If you have worked with modern CSS, whether you are rolling your own or using a frameworks like Bootstrap & Foundation, chances are you are using Flexbox for layout and alignment.

To align or to justify..that is the question

For a very long time, I have been trying to figure out what is the difference between align-items , align-content & justify-content and how they work or more importantly when they work.

TL;DR

If you have set your flex-direction to row , then justify-content works on the horizontal axis and align-* properties work on the vertical axis.

to , then works on the horizontal axis and properties work on the vertical axis. If you have set your flex-direction to column , then align-* properties work on the horizontal axis and justify-content works on the vertical axis.

What separates align-items and align-content?

align-items effect the alignment of items on the current line.

effect the alignment of items on the current line. align-content effects the alignment accross lines of a flex-container. This means that this property has no effect on single-line containers.

The rest of the article is just a brain dump of everything I learned while trying to figure out the above.

Nomenclature

Flex Container : An element on which the display value is set to flex .

: An element on which the value is set to . Flex Items : Direct children of the flex containers are called flex items.

: Direct children of the flex containers are called flex items. Main Axis : The axis defined by the flex-direction property. — flex-direction:row means that elements inside the flex container are aligned next to each other. Technically, these elements are aligned along the inline-axis (just like inline elements). — flex-direction:column means that elements are aligned along the vertical axis i.e. below each other. Technically called the block-axis (just like block elements)

Cross Axis : The axis perpendicular to the main axis is called the cross axis.

: The axis perpendicular to the main axis is called the cross axis. Single-line Container : Flex containers whose flex-wrap property is set to nowrap . By default every flex container is a single-line container.

: Flex containers whose property is set to . By default every flex container is a single-line container. Multi-line Containers: Flex containers whose flex-wrap property is set to wrap

TL;DR with Nomenclature

Now that we know the jargon, we can rewrite the TL;DR as-

justify-content works on the Main Axis and align-* properties work on the Cross Axis.

works on the Main Axis and properties work on the Cross Axis. justify-content and align-items are similar in their behviour, the difference being that justify-content works on the the main axis while align-items works on the cross axis.

and are similar in their behviour, the difference being that works on the the main axis while works on the cross axis. align-content works only on multi-line containers and has no effect on single line containers.

Sources