Flexbox - Align Items vs Align Content.
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
torow
, thenjustify-content
works on the horizontal axis andalign-*
properties work on the vertical axis. - If you have set your
flex-direction
tocolumn
, thenalign-*
properties work on the horizontal axis andjustify-content
works on the vertical axis.
What separates align-items and align-content?
align-items
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 toflex
. - 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.
- Single-line Container: Flex containers whose
flex-wrap
property is set tonowrap
. By default every flex container is a single-line container. - Multi-line Containers: Flex containers whose
flex-wrap
property is set towrap
TL;DR with Nomenclature
Now that we know the jargon, we can rewrite the TL;DR as-
justify-content
works on the Main Axis andalign-*
properties work on the Cross Axis.justify-content
andalign-items
are similar in their behviour, the difference being thatjustify-content
works on the the main axis whilealign-items
works on the cross axis.align-content
works only on multi-line containers and has no effect on single line containers.