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

CSSのalign-itemsプロパティの使い方を徹底解説

CSSのalign-itemsプロパティは、フレックスボックスレイアウトにおいて、交差軸（クロス軸）方向に沿ってフレックスアイテムを整列させるために使用します。主軸方向の配置を制御する「justify-content」プロパティと対になる存在で、縦方向（または横書き以外のレイアウトでは横方向）の揃え方を指定できます。

align-itemsプロパティの主な値

  • stretch（初期値）：コンテナの高さに合わせてアイテムを引き伸ばして表示します。
  • center：交差軸の中央にアイテムを揃えます。
  • flex-start：交差軸の開始位置にアイテムを揃えます。
  • flex-end：交差軸の終端位置にアイテムを揃えます。
  • baseline：アイテム内のテキストのベースラインに合わせて揃えます。

実装例

以下のコードでは、親要素に「display: flex;」と「align-items: center;」を指定しています。これにより、高さ150pxのコンテナ内で、4つのフレックスアイテムが垂直方向の中央に配置されます。

<!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>

実行結果のポイント

このコードを実行すると、オレンジ色の背景を持つ横長のコンテナの中に、白い背景の4つのアイテム（Q1〜Q4）が並んで表示され、「align-items: center;」の効果により、それぞれがコンテナの上下中央に揃えられます。もし「align-items」を指定しなければ、初期値の「stretch」が適用され、アイテムはコンテナの高さいっぱいに引き伸ばされる点に注意してください。

なお、個々のアイテムだけ配置を変えたい場合は、子要素側に「align-self」プロパティを指定することで、親の設定を上書きできるので、併せて覚えておくと便利です。

  1. CSS子セレクター（>）とは？使い方とサンプルコードで解説

    CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro