Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between justify-content vs align-items? [duplicate]

Tags:

css

flexbox

People also ask

What is the difference between justify and alignment?

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.

Does align-content override align-items?

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.

What can I use instead of justify-content?

You may use margin instead align-items and/or justify-content .

What does justify-content mean?

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.

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

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

See it in action:

http://codepen.io/enxaneta/full/adLPwv/

In my opinion:

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.


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!