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

CSSのalign-content: space-betweenでフレックスラインを等間隔に配置する方法

CSS Flexboxでは、複数行に折り返されたフレックスアイテム（フレックスライン）の間隔を調整するために、align-contentプロパティを使用します。この記事では、値としてspace-betweenを指定する方法を解説します。

space-betweenとは？

align-content: space-between;を指定すると、コンテナ内の余白が均等に分配され、最初のフレックスラインはコンテナの先頭に、最後のフレックスラインはコンテナの末尾に配置されます。そして、残りのライン同士の間には等しい間隔が自動的に挿入されます。

なお、align-contentプロパティが機能するためには、親要素にflex-wrap: wrap;を指定して、アイテムが複数行に折り返される状態を作っておく必要があります。

実装例

以下のコードを実行すると、space-betweenの動作を確認できます。8つのボックスが2行に分かれ、上下と中央に等間隔のスペースが生まれます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .mycontainer {
        display: flex;
        height: 200px;
        background-color: #5D6D7E;
        align-content: space-between;
        flex-wrap: wrap;
      }
      .mycontainer > div {
        background-color: #EBF5FB;
        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; … コンテナをフレックスボックスとして定義します。
  • flex-wrap: wrap; … アイテムがコンテナの幅を超えた場合に次の行へ折り返します。
  • height: 200px; … コンテナに高さを持たせることで、行間に余白が発生し、space-betweenの効果が視覚的にわかりやすくなります。
  • align-content: space-between; … フレックスライン同士の間に均等な間隔を設定します。

まとめ

align-content: space-between;を使えば、折り返されたフレックスラインをコンテナの高さ全体にわたって美しく等間隔に配置できます。カードレイアウトやギャラリー表示など、複数行のコンテンツを整列させたい場面でぜひ活用してみてください。

  1. 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;などで折り

  2. CSS3のFlexbox（フレックスボックス）レイアウトを徹底解説

    Flexboxとは？ CSS3には「Flexible Box」、通称Flexbox（フレックスボックス）と呼ばれるレイアウトモードが用意されています。Flexboxを活用することで、これまではfloatやpositioningなどのテクニックを駆使しなければ実現できなかった、複雑なWebアプリケーションやWebページのレイアウトを、シンプルな記述で簡単に構築できるようになります。 Flexboxは「フレックスコンテナ」と「フレックスアイテム」という2つの要素で構成されます。display: flex; を指定した要素がコンテナとなり、その直下の子要素が自動的にフレックスアイテムとして扱われます