So verwenden Sie das Flex-Layout, um mehrere Zeilen und mehrere Divs horizontal und vertikal zu zentrieren

Horizontal und vertikal waren schon immer ein klassisches Problem, als ich einen Seitenstil schrieb. Diesmal sind mehrere Zeilen und mehrere p-Blöcke erforderlich :

<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>

Dieses Mal verwenden wir das Flex-Layout, denn wenn wir das Flex-Layout verwenden, hilft uns der Browser bei der Berechnung. Hier muss das übergeordnete Element ein Flex-Layout sein eine Hauptachse und eine vertikale Querachse. Die Hauptachse ist standardmäßig horizontal und kann über das Flex-Richtungsattribut geändert werden. Informationen zum spezifischen Flex-Layout finden Sie im Tutorial von Lehrer Ruan Yifeng. http://www.ruanyifeng.com/blog/2015/07/flex-grammar .htmlcss

Der CSS-Code lautet wie folgt:

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

Das Flex-Wrap-Attribut bezieht sich auf ob Elemente im Flex-Layout umbrochen werden müssen. Dieses Attribut kann insgesamt drei Werte annehmen, nämlich nowrap, wrap, wrap-reverse. Der Standardwert ist nowwrap (kein Zeilenumbruch). Wrap bedeutet, dass die untergeordneten Elemente umgebrochen werden und die erste Zeile oben ist. Wrap-Reverse bedeutet, dass die untergeordneten Elemente umgebrochen werden und die erste Zeile unten ist.

Das align-items-Attribut definiert, wie die Elemente auf der Querachse ausgerichtet werden. Die Standardrichtung der Querachse ist hier die vertikale Richtung, die am Mittelpunkt ausgerichtet ist Querachse. Dieses Attribut hat die folgenden Mehrere Werte:

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

Auf diese Weise erreichen wir den Zweck der vertikalen Zentrierung und müssen sie auch horizontal zentrieren.

Der Stilcode für untergeordnete Elemente, die vertikal zentriert werden müssen, lautet wie folgt:

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

display: inline-block Damit p in derselben Zeile angezeigt werden kann, muss das Breite und Höhe bestimmen hier, wie viele p-Blöcke in einer Zeile angezeigt werden können.

margin: 0 auto bedeutet, dass die untergeordneten Elemente automatisch zentriert werden. Der Browser hilft uns bei der Berechnung, sodass wir eine horizontale und vertikale Zentrierung erreichen können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Flex-Layout, um mehrere Zeilen und mehrere Divs horizontal und vertikal zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!