Comparez align-content et align-items : en quoi sont-ils différents ?
P粉904405941
P粉904405941 2023-10-13 16:51:19
0
1
520

align-itemsalign-contentQuelle est la différence ?

P粉904405941
P粉904405941

répondre à tous (1)
P粉854119263

Lorsque

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

Voici un exemple de ce à quoi ressemblealign-items:center:

Exemple de

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

Voici à quoi ressemblealign-content: space-around;avecalign-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'estun 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
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!