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;などで折り返しが有効になり、フレックスラインが複数存在する場合のみです。単一行のフレックスコンテナでは効果がないため、必ずflex-wrapと組み合わせて使用しましょう。

実装例

以下のコードを実行すると、flex-start値によるフレックスラインの配置を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            height: 300px;
            background-color: blue;
            align-content: flex-start;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: orange;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Queue</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
      </div>
   </body>
</html>

コードのポイント解説

display: flex; — コンテナをフレックスボックスとして定義します。
height: 300px; — コンテナに十分な高さを持たせることで、ラインの配置が視覚的に分かりやすくなります。
flex-wrap: wrap; — アイテムが横幅に収まらない場合に折り返しを有効化し、複数のフレックスラインを生成します。
align-content: flex-start; — 折り返された複数のフレックスラインを、コンテナの先頭側にまとめて配置します。この例ではオレンジ色のアイテム群が青いコンテナの上部に寄って表示されます。

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

align-content: flex-startの基本

実装例

コードのポイント解説

関連する値との違い