justify-content 与 align-items 之间的区别? [英] Difference between justify-content vs align-items?

问题描述

我真的很难理解有什么区别?根据我的研究，justify-content 似乎可以做到... space-between 和 space-around，而 align-items 可以做... stretch、baseline、initial 和 inherit?

I'm having a really hard time understanding what's the difference? From my research it seems like justify-content can do... space-between and space-around, while align-items can do... stretch, baseline, initial and inherit?

看起来这两个属性都共享，flex-start、flex-end 和 center.

Also looks like both properties share, flex-start, flex-end and center.

使用一个比另一个有缺点/优势还是只是偏好?我觉得他们很相似，只是做同样的事情有人知道区别吗?谢谢！！

Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!

推荐答案

两者都设置了内容的对齐方式.

Both set the alignment of the content.

(如果 flex-direction 是行，则设置水平对齐/间距；如果 flex-direction 是列，则设置垂直对齐/间距)

(set horizontal alignment/spacing if flex-direction is row or vertical alignment/spacing if flex-direction is column)

例如，如果 flex-direction 是 row(默认):

For instance, if flex-direction is row (default):

flex-start; 对齐子项水平左

flex-end; 对齐子项水平右

center; 对齐子元素 水平 居中 (惊奇！)

center; Align children horizontally centered (amaze!)

space-between; 将子元素水平均匀地分布在整个宽度上

space-between; Distribute children horizontally evenly across entire width

space-around; 将子元素水平均匀地分布在整个宽度上(但边缘有空间

space-around; Distribute children horizontally evenly across entire width (but with space on the edges

(如果 flex-direction 是行设置垂直对齐，或者如果 flex-direction 是列设置水平对齐)

(set vertical alignment if flex-direction is row or horizontal alignment if flex-direction is column)

例如，如果 flex-direction 是 row(默认):

For instance, if flex-direction is row (default):

flex-start; 对齐子元素垂直顶部

flex-end; 对齐子元素垂直底部

center; 对齐子元素垂直居中(惊奇！)

baseline; 对齐子项垂直所以他们的基线对齐(实际上不起作用)

baseline; Aligned children vertically so their baselines align (doesn't really work)

stretch; 强制子元素为容器的高度(非常适合列)

stretch; Force children to be height of container (great for columns)

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

这些应该被命名:

flex-x: 主轴对齐/间距

flex-y: 次轴对齐

但是使用 HTML，您永远不会有好东西.从不.

But with HTML you can never have nice things. Never.

这篇关于justify-content 与 align-items 之间的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！