align-items 和 align-content Was ist der Unterschied?
align-items
align-content
flex-box 的 align-items 属性沿着横轴对齐 Flex 容器内的项目,就像 justify-content 沿着主轴对齐一样。 (对于默认的 flex-direction: row ,交叉轴对应于垂直方向,主轴对应于水平方向。使用 flex-direction: column 时,这两个轴可以分别互换)。
justify-content
flex-direction: row
flex-direction: column
以下是 align-items:center 外观的示例:
align-items:center
但是 align-content 适用于多行灵活框。当项目位于一行中时,它没有任何效果。它根据其价值来调整整个结构。以下是 align-content: space-around; 的示例:
align-content: space-around;
这是 align-content: space-around; 与 align-items:center 的外观:
请注意,第一行中的第三个框和所有其他框都更改为在该行中垂直居中。
以下是一些可以使用的 codepen 链接:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
这是一支超级酷的笔,它可以显示并让您可以使用 Flexbox 中的几乎所有内容。
flex-box 的
align-items
属性沿着横轴对齐 Flex 容器内的项目,就像justify-content
沿着主轴对齐一样。 (对于默认的flex-direction: row
,交叉轴对应于垂直方向,主轴对应于水平方向。使用flex-direction: column
时,这两个轴可以分别互换)。以下是
align-items:center
外观的示例:但是
align-content
适用于多行灵活框。当项目位于一行中时,它没有任何效果。它根据其价值来调整整个结构。以下是align-content: space-around;
的示例:这是
align-content: space-around;
与align-items:center
的外观:请注意,第一行中的第三个框和所有其他框都更改为在该行中垂直居中。
以下是一些可以使用的 codepen 链接:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
这是一支超级酷的笔,它可以显示并让您可以使用 Flexbox 中的几乎所有内容。