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

CSSのalign-contentプロパティとは？フレックスラインの配置をわかりやすく解説

align-contentプロパティとは

CSSのalign-contentプロパティは、フレックスコンテナ内のフレックスライン（行）の配置を制御するためのプロパティです。flex-wrapプロパティによってアイテムが複数行に折り返されている場合に、行同士の間隔や縦方向の位置を調整できます。

このプロパティを使うことで、行の周囲にスペースを追加したり、行全体をコンテナの上部・下部・中央に寄せたりすることが可能になります。

実装例：space-betweenでフレックスラインを配置する

以下のコードは、align-contentプロパティに「space-between」を指定したサンプルです。各行が均等に配置され、行と行の間にスペースが挿入されます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
   display: flex;
   background-color: orange;
   align-content: space-between;
   height: 150px;
   width: 600px;
   flex-wrap: wrap;
}
.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>Q5</div>
   <div>Q6</div>
   <div>Q7</div>
   <div>Q8</div>
</div>
</body>
</html>

コードのポイント

  • display: flex; … フレックスボックスレイアウトを有効化します。
  • flex-wrap: wrap; … アイテムを複数行に折り返します。align-contentを機能させるために必須です。
  • align-content: space-between; … 行を均等に配置し、行間にスペースを挿入します。
  • height: 150px; … コンテナに高さを持たせることで、行を配置するための余白が生まれます。

align-contentで使える主な値

  • stretch（初期値）：行を引き伸ばして、コンテナの高さいっぱいに配置します。
  • flex-start：すべての行をコンテナの先頭側に寄せて配置します。
  • flex-end：すべての行をコンテナの末尾側に寄せて配置します。
  • center：すべての行をコンテナの中央に配置します。
  • space-between：行を均等に配置し、最初の行は先頭に、最後の行は末尾に寄せます。
  • space-around：各行の前後に均等なスペースを配置します。
  • space-evenly：行間に完全に均等なスペースを配置します。

注意点

align-contentプロパティは、単一行のフレックスコンテナでは効果がありません。flex-wrap: wrap;などを指定して複数行になっている場合にのみ機能するため、使用する際は必ず折り返し設定と組み合わせましょう。

  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