Comment utiliser la disposition flexible pour centrer plusieurs lignes et plusieurs divs horizontalement et verticalement

L'horizontale et la verticale ont toujours été un problème classique. J'ai rencontré ce problème récemment lorsque j'écrivais un style de page, ce qui doit être centré horizontalement et verticalement, ce sont plusieurs lignes et plusieurs blocs p. :

<p class="content" > 
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p> 
</p>

Cette fois, nous utilisons la disposition flex, car si nous utilisons la disposition flex, le navigateur nous aidera à le calculer. Ici, l'élément parent doit être une disposition flex, il y aura. un axe principal et un axe transversal vertical. L'axe principal est horizontal par défaut. Oui, l'axe transversal est vertical par défaut et peut être modifié via l'attribut flex-direction. Pour une disposition flexible spécifique, veuillez vous référer au didacticiel de l'enseignant Ruan Yifeng : http://www.ruanyifeng.com/blog/2015/07/flex-grammar .htmlcss

Le code CSS est le suivant :

.content {  
  display: flex;  
  flex-wrap: wrap;  
  align-items: center;  
  width: 100%;  
  height: 100%;
  }

L'attribut flex-wrap fait référence à si les éléments sous disposition flexible doivent être enveloppés. Cet attribut peut prendre un total de trois valeurs, à savoir nowrap, wrap, wrap-reverse. La valeur par défaut est nowwrap (pas de retour à la ligne), wrap signifie que les éléments enfants sont enveloppés et la première ligne est en haut, wrap-reverse signifie que les éléments enfants sont enveloppés et la première ligne est en bas.

L'attribut align-items définit la façon dont les éléments sont alignés sur l'axe transversal. La direction par défaut de l'axe transversal est ici la direction verticale. La valeur que nous choisissons est le centre, qui est aligné avec le milieu de l'axe transversal. axe transversal. Cet attribut a les valeurs suivantes :

flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

De cette façon, nous atteignons l'objectif du centrage vertical, et nous devons également le centrer horizontalement.

Le code de style pour les éléments enfants qui doivent être centrés verticalement est le suivant :

.chart {  
    display: inline-block;  
    width: 30%; 
   height: 40%;  
   margin: 0 auto;  
   border: 1px solid #000;
   }

display: inline-block Afin de permettre à p d'être affiché sur la même ligne, le la largeur et la hauteur déterminent ici la quantité qui peut être affichée dans une ligne p de blocs.

marge : 0 auto consiste à centrer les éléments enfants horizontalement. auto signifie automatique. Le navigateur nous aidera à calculer, afin que nous puissions réaliser un centrage horizontal et vertical.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!