Flexbox Alignment
Flexbox provides very precise control for aligning flex items. Here's an overview.
Alignment is a large part of flexbox. Aside from the usual CSS alignment properties, there are some alignment properties that were designed specifically for flexbox and grid.
However, as the flexbox specification progressed, it became clear that various alignment properties that were being developed specifically for flexbox, could also be applied to other box models. So a new CSS module was created to deal specifically with alignment of boxes within their containers when using block layout, table layout, flex layout, and grid layout.
Here are the main properties that deal with flexbox in that specification.
The align-items
Property
The align-items
property specifies the default align-self
value for all the flex items participating in the flex container's formatting context.
In this example, we apply align-items: center
to the flex container, therefore all flex items are aligned to the center of the block axis.
But because this is a default setting, any of the flex items could override this with the align-self
property.
The align-self
Property
The align-self
property aligns a box within its containing block along the block/column/cross axis.
Here, the red flex item has a value of flex-start
, and the blue item has a value of flex-end
. This moves the red item to the start and the blue item to the end.
However, we haven't set a value for the green item. Therefore it uses the default value, which in this case, is set to center
by the align-items
on the flex container.
The justify-content
Property
The justify-content
property aligns the flex container's contents as a whole along the main/inline axis.
In this example we use space-between
, which results in an even space between each item, with each of the end ones lined up against its respective edge.
The align-content
Property
The align-content
property is the same as justify-content
, except that this property aligns along the cross/block axis.
The place-content
Property
The place-content
property is shorthand for justify-content
and align-content
.
Margins
You can still apply margins to flex items. Here's an example of applying margin: auto
to a flex item even after it's been aligned with other alignment properties.