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

CSSのalign-itemsプロパティでstretch値を使う方法【フレックスアイテムを引き伸ばす】

CSSのalign-itemsプロパティとstretch値とは

CSSのalign-itemsプロパティは、フレックスコンテナ内のアイテムを交差軸(クロス軸)方向にどのように配置するかを指定するためのプロパティです。この値にstretchを指定すると、各フレックスアイテムがコンテナの高さいっぱいに引き伸ばされて表示されます。

stretchは実はalign-itemsの初期値(デフォルト値)です。そのため、子要素側に明示的な高さが設定されていない場合は、指定しなくてもアイテムが自動的に伸縮します。効果を意識的に制御したい場合や、コードの可読性を高めたい場合には、明示的に記述しておくとよいでしょう。

stretchの実装例

以下のコードでは、フレックスコンテナに対してalign-items: stretch;を設定し、中の子要素をコンテナの高さまで引き伸ばしています。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .mycontainer {
        display: flex;
        height: 200px;
        background-color: red;
        align-items: stretch;
      }
      .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>
 </body>
</html>

コードのポイント

  • .mycontainerにdisplay: flex;を指定し、フレックスコンテナとして定義しています。
  • height: 200px;でコンテナに高さを持たせることで、アイテムが伸縮する様子が視覚的にわかりやすくなっています。
  • align-items: stretch;により、子要素(Q1〜Q4)がコンテナの上下いっぱいに広がります。
  • 背景色(redとorange)を変えることで、伸縮の境界がひと目で確認できます。

使用時の注意点

子要素側にheightなどの高さが明示的に指定されている場合、またはalign-selfで別の配置方法が指定されている場合は、stretchの効果は適用されません。アイテムを引き伸ばしたいときは、これらの指定がないか事前に確認しておきましょう。

  1. CSSのflex-basisプロパティとは？フレックスアイテムの初期サイズ指定方法を解説

    CSSのflex-basisプロパティは、Flexboxレイアウトにおけるフレックスアイテム（子要素）の基本となる長さ（主軸方向の初期サイズ）を設定するためのプロパティです。flex-growやflex-shrinkが伸縮の挙動を制御するのに対し、flex-basisはアイテムが伸縮する前の基準サイズを決めます。 flex-basisで使える主な値 auto（初期値）：要素自身のwidthまたはheightの値に依存します。 length：px、em、remなどの単位で固定値を指定します。 percentage：親コンテナの幅に対する割合（%）で指定します。 content：コンテンツの内容

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

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