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

CSSのalign-itemsプロパティでcenter値を使ってフレックスアイテムを中央揃えする方法

CSSのalign-itemsプロパティは、フレックスコンテナ内のアイテムを交差軸（クロス軸）方向にどのように配置するかを指定するプロパティです。このプロパティにcenterという値を設定すると、フレックスアイテムをコンテナの中央に揃えることができます。

align-items: center の基本動作

display: flex;が指定されたコンテナに対してalign-items: center;を適用すると、各アイテムは交差軸方向（デフォルトでは縦方向）の中央位置に配置されます。アイテムの高さが異なる場合でも、それぞれが中央基準で整列されるため、見た目が美しいレイアウトを簡単に実現できます。

サンプルコード

以下のコードを実行して、center値による中央揃えの効果を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            align-items: center;
            height: 150px;
            width: 600px;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
      </div>
   </body>
</html>

コードの解説

この例では、高さ150px・幅600pxのオレンジ色のフレックスコンテナ（.mycontainer）の中に、4つの白いボックス（Q1〜Q4）を配置しています。コンテナにalign-items: center;を指定しているため、各ボックスはコンテナの上下方向の中央に揃えて表示されます。

もしalign-itemsの指定を外した場合、デフォルト値であるstretchが適用され、アイテムがコンテナの高さいっぱいに引き伸ばされてしまいます。中央揃えにしたい場合は、忘れずにcenterを指定しましょう。

align-itemsで使える主な値

  • stretch（デフォルト）： アイテムをコンテナの高さに合わせて伸縮させる
  • center: アイテムを交差軸方向の中央に配置する
  • flex-start: アイテムを交差軸の開始位置に揃える
  • flex-end: アイテムを交差軸の終端位置に揃える
  • baseline: アイテムをテキストのベースラインに合わせて揃える

用途に応じてこれらの値を使い分けることで、フレックスボックスレイアウトをより柔軟に制御できます。

  1. CSSのalign-contentプロパティにflex-start値を指定する方法

    CSSのalign-contentプロパティに値flex-startを指定すると、フレックスコンテナ内の複数行のアイテムをコンテナの先頭（開始位置）に寄せて配置できます。この値は、flex-wrap: wrap;などによってフレックスアイテムが複数行に折り返されている場合に有効になります。各行は互いに詰められ、クロス軸方向の開始側にまとめて配置されます。使用例以下のコードを実行すると、align-content: flex-start;の動作を確認できます。<!DOCTYPE html> <html>    <head> &nb

  2. CSSのjustify-contentプロパティでcenter値を使ってフレックスアイテムを中央揃えにする方法

    CSSのjustify-contentプロパティにcenter値を指定すると、フレックスコンテナ内のフレックスアイテムを主軸方向（横並びの場合は水平方向）の中央に配置できます。 この値は、余白をアイテムの左右に均等に分配し、アイテム全体をコンテナの中心にまとめて表示したい場合に便利です。例えば、ナビゲーションメニューやボタングループを画面中央に揃えたいときなどに活用できます。 center値の基本的な使い方 親要素（フレックスコンテナ）にdisplay: flex;とjustify-content: center;を指定するだけで、子要素が中央に寄せられます。 .mycontainer {