align-items
和align-content
之间的区别是什么
发布于 2016-01-22 18:40:35
flex-box的align-items
属性将flex容器中的项沿着横轴对齐,就像justify-content
沿着主轴所做的那样。(对于默认flex-direction: row
,横轴对应于垂直,主轴对应于水平。在flex-direction: column
中,这两个分别互换)。
下面是align-items:center
外观的一个示例:
但是align-content
适用于多行可弯曲的盒子。当项目在单行中时,它不起作用。它根据其值对齐整个结构。下面是align-content: space-around;
的一个例子:
下面是带有align-items:center
的align-content: space-around;
的外观:
注意,第三个框和第一行中的所有其他框都更改为在该行中垂直居中。
下面是一些可以使用的代码链接:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Here's是一支超级酷的钢笔,它可以显示并让你玩flexbox中的几乎所有东西。
发布于 2015-06-20 03:54:53
我已经在我的浏览器上检查过了。
当值为stretch时,align-content
可以更改行的高度或列的宽度,或者在space-between
、space-around
、flex-start
、flex-end values
的行之间或行周围添加空格。
align-items
可以更改项目在行区域内的高度或位置。当项目没有被包装时,它们只有一行,它的区域总是延伸到弹性框区域(即使项目溢出),align-content
对单行没有影响。因此,它对未换行的项目没有影响,并且当所有项目都在一行上时,只有align-items
可以更改项目的位置或拉伸它们。
但是,如果对它们进行换行,则每行中都有多个行和项。如果每一行的所有项目都具有相同的高度(对于行方向),那么该行的高度将等于这些项目的高度,并且您不会看到任何更改align-items
值的效果。
因此,如果您想在项目被包装并且具有相同的高度(对于行方向)时,首先通过align-items
来影响项目,则必须使用带有stretch值的align-content
来扩展行区域。
发布于 2017-05-28 14:58:32
主要的区别是元素的高度不同!然后,您可以看到在行中,它们都是center\end\start
https://stackoverflow.com/questions/27539262
复制相似问题