CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS】align-contentでコンテナ内のグリッド全体を垂直方向に配置する方法

CSS Gridレイアウトでは、align-contentプロパティを使うことで、コンテナ内のグリッド全体を垂直方向（ブロック軸）に自由に配置できます。グリッドトラックの合計サイズがコンテナの高さより小さい場合に生じる余白を、どのように分配するかをこのプロパティが制御します。

align-contentの主な値

  • center … グリッド全体をコンテナの中央に配置
  • start … コンテナの先頭に配置
  • end … コンテナの末尾に配置
  • space-between … 最初と最後の行を両端に揃え、残りの行を均等に配置
  • space-around … 各行の前後に均等な余白を配置
  • space-evenly … 余白をすべての行の間に完全に均等に配置
  • stretch … 行を引き伸ばしてコンテナを満たす（初期値）

実装例：グリッドを垂直方向の中央に配置する

次のコードでは、align-content: center;を指定することで、グレー背景のコンテナ内にオレンジ色の6つのセルを垂直方向の中央に配置しています。実際にブラウザで実行して動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            align-content: center;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>

コードのポイント

  • display: grid; … コンテナをグリッドレイアウトとして定義します
  • align-content: center; … グリッド全体をコンテナ内の垂直方向中央に配置します
  • grid-gap: 20px; … セル同士の間隔を20pxに設定します（現在は短縮形のgapプロパティの使用が推奨されています）

動作確認のコツ

align-contentの効果をはっきりと視覚的に確認したい場合は、コンテナにheight: 400px;のように明示的な高さを指定するとよいでしょう。コンテナの高さがグリッドの内容より大きい場合にのみ、余白の配分方法による配置の違いが現れます。水平方向の配置を調整したい場合は、代わりにjustify-contentプロパティを使用してください。

  1. CSSでフレックスアイテムをコンテナの中央に揃える方法

    CSSでフレックスアイテム（flexアイテム）をコンテナの中央に配置したい場合は、justify-content プロパティに center を指定します。このプロパティは、主軸（デフォルトでは水平方向）に沿ってフレックスアイテムをどのように配置するかを制御するもので、center を設定すると余白が均等に分配され、アイテム全体がコンテナの中央にまとまります。justify-content の基本的な使い方親要素に display: flex; を適用したうえで、justify-content: center; を追加するだけで、子要素が中央寄せされます。以下は代表的な指定例です。.mycon

  2. CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)

    CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り