Menu
Text alignment is a paragraph formatting attribute that determines the appearance of the text in a whole paragraph. For example, in a paragraph that is left-aligned (the most common alignment), text is aligned with the left margin. In a paragraph that is justified, text is aligned with both margins.
The align-self applies to all flex items, allows this default alignment to be overridden for individual flex items. The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.
You may use margin instead align-items and/or justify-content .
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
Both set the alignment of the content.
justify-content: along primary axis
(set horizontal alignment/spacing if flex-direction is row or vertical alignment/spacing if flex-direction is column)
For instance, if flex-direction is row (default):
flex-start; Align children horizontally left
flex-end; Align children horizontally right
center; Align children horizontally centered (amaze!)
space-between; Distribute children horizontally evenly across entire width
space-around; Distribute children horizontally evenly across entire width (but with space on the edges
align-items: along secondary axis
(set vertical alignment if flex-direction is row or horizontal alignment if flex-direction is column)
For instance, if flex-direction is row (default):
flex-start; Align children vertically top
flex-end; Align children vertically bottom
center; Align children vertically centered (amaze!)
baseline; Aligned children vertically so their baselines align (doesn't really work)
stretch; Force children to be height of container (great for columns)
http://codepen.io/enxaneta/full/adLPwv/
These should have been named:
flex-x: alignment/spacing in primary axis
flex-y: alignment in secondary axis
But with HTML you can never have nice things. Never.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With