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.
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 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.
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.
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.