Vergleichen Sie align-content und align-items: Wie unterscheiden sie sich?
P粉904405941
P粉904405941 2023-10-13 16:51:19
0
1
613

align-itemsalign-content Was ist der Unterschied?

P粉904405941
P粉904405941

Antworte allen(1)
P粉854119263

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 中的几乎所有内容。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage