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:
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
Exemple dealign-items:center
:mais
align-content
适用于多行灵活框。当项目位于一行中时,它没有任何效果。它根据其价值来调整整个结构。以下是align-content: space-around;
:Voici à quoi ressemble
align-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.