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.