プロパティ align-content

プロパティ align-content は、 flexブロックの交差軸方向、またはグリッドの垂直軸方向に沿った 要素の整列を指定します。 親要素に適用されます。

構文

cssセレクタ {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

値

例 . 値 flex-start

この例では、整列の基準となる軸は上から下に向かっており、 これは交差軸です。 得られた結果からわかるように、すべての要素は その上部（始端）に寄せられています:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . 値 flex-end

この例では、プロパティ align-content の値が flex-end に設定されているため、 ブロックは交差軸の下端（終端）に寄せられています:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . 値 center

現在、ブロックは交差軸の中央に整列されています:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

グリッドにおける垂直軸始端への整列

グリッド内の要素を垂直軸の始端に整列させてみましょう:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

グリッドにおける垂直軸中央への整列

次に、要素を垂直軸の中央に整列させてみましょう:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

グリッドにおける垂直軸終端への整列

要素を垂直軸の終端に整列させてみましょう:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

関連項目