フレックス レイアウトを使用して複数の行と複数の div を水平方向および垂直方向に中央揃えにする方法

水平方向と垂直方向は常に古典的な問題です。最近、ページ スタイルを作成するときにこの問題に遭遇しました。今回は、複数の行と複数の p ブロックが必要です。今回は flex Layout を使用しました。Flex レイアウトを使用すると、ブラウザが計算してくれるためです。親要素は Flex レイアウトの下に主軸と垂直の交差軸が存在します。メイン軸はデフォルトで水平で、クロス軸はデフォルトで垂直です。特定のフレックス レイアウトについては、Ruan Yifeng 先生のチュートリアルを参照してください。 .ruanyifeng.com/blog/2015/07/flex-grammar.htmlcss

CSS コードは次のとおりです:

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

flex-wrap 属性は、flex レイアウト内の要素をラップする必要があるかどうかを参照します。この属性は 3 つを取ることができます。値、つまりnowrap、wrap、およびwrap-reverse。デフォルト値は nowwrap (行の折り返しなし) です。wrap は子要素が折り返され、最初の行が一番上にあることを意味します。wrap-reverse は子要素が折り返され、最初の行が一番下にあることを意味します。

align-items 属性は、交差軸上で項目をどのように配置するかを定義します。ここで選択する値は、交差軸の中点に揃えられる垂直方向です。属性には次の値があります:

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

このようにして、垂直方向の中央揃えの目的は達成されましたが、水平方向の中央揃えも行う必要があります。

垂直方向の中央に配置する必要がある子要素のスタイル コードは次のとおりです:

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

display: inline-block p を同じ行に表示するには、ここでの幅と高さによって p ブロックの数が決まります。一行で表示されます。

margin: 0 auto は子要素を水平方向に中央揃えにすることを意味し、ブラウザーが計算を支援して水平方向と垂直方向の中央揃えを実現します。

以上がフレックス レイアウトを使用して複数の行と複数の div を水平方向および垂直方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。