May 4th, 2019
Day two of learning CSS Flexbox. This lesson told me how to align items in a flex container using the justify-content property.
It’s not always that the items inside the flex container fill the entire container. In order to tell CSS how we want to align and space out the flex items, we can use justify-content.
Setting a flex container as a row places the flex items side by side. Setting it as a column places the flex items vertical stack from top to bottom.
The direction the flex items are arranged is called the main axis; horizontal in a row and vertical in a column. Think of this main axis as a line that cuts through each item.
Illustration from w3.org: https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg
There are several options for spacing the flex items along the main axis:
center: This is the most common. It aligns all the flex items to the center in the flex container.
flex-start: Aligns the items to the start of the flex container (left in a row, top for a column).
flex-end: Aligns the items to the end of the flex container (right in a row, bottom for column).
space-between: Aligns the items the center of the main axis and gives them extra space between them. The first and the last items are pushed to the edges of the container. The rest are spaced out evenly.
space-around: Similar to space between but space is distributed evenly around each flex item, also those on the edges.