Quelle est la différence entre aligner du contenu et aligner des éléments ?
P粉316423089
P粉316423089 2023-08-24 00:26:28
0
1
504
Quelle est la différence entre <p><code>align-items</code> et <code>align-content</code> ? </p>
P粉316423089
P粉316423089

répondre à tous(1)
P粉536532781

Lorsque

flex-box est align-items 属性沿着横轴对齐 Flex 容器内的项目,就像 justify-content 沿着主轴对齐一样。 (对于默认的 flex-direction: row ,交叉轴对应于垂直方向,主轴对应于水平方向。使用 flex-direction: column, ces deux axes peuvent être intervertis respectivement).

Voici un exemple de ce à quoi ressemble align-items:center :

Exemple de

mais align-content 适用于多行灵活框。当项目位于一行中时,它没有任何效果。它根据其价值来调整整个结构。以下是 align-content: space-around; :

Voici à quoi ressemble align-content: space-around; avec align-content: space-around;align-items:center :

Notez que la troisième case de la première rangée et toutes les autres cases changent pour être centrées verticalement dans cette rangée.

Voici quelques liens codepen que vous pouvez utiliser :

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

C'est un stylo super cool qui affiche et vous permet d'utiliser presque tout dans Flexbox.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal