⌘K

align-items プロパティ

align-items プロパティは、フレックスボックスにおける交差軸方向、またはグリッドにおける垂直軸方向の要素の配置を設定します。親要素に適用されます。

構文

cssセレクタ {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

値

値 説明
flex-start ブロックが交差軸（垂直軸）の始端に揃えられます。
flex-end ブロックが交差軸（垂直軸）の終端に揃えられます。
center ブロックが交差軸（垂直軸）の中央に配置されます。
baseline 要素がそれらのベースラインに沿って揃えられます。ベースラインは、'p'や'y'のような文字のディセンダー（下部にはみ出る部分）を考慮せず、文字の下端を通る仮想の線です。
stretch ブロックが交差軸方向の利用可能なスペース全体に引き伸ばされます。ただし、min-widthやmax-width（min-height、max-height）が設定されている場合はそれが考慮されます。要素に幅と高さが指定されている場合、stretchは無視されます。

初期値: stretch。

例 . stretch 値

現在、主軸は左から右に向かっており、交差軸方向では要素がコンテナの高さいっぱいに伸びています: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

例 . stretch 値 + 要素のサイズ指定

現在、要素に幅と高さが指定されているため、align-items プロパティの stretch 値は無視されます: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . flex-start 値、要素のサイズ指定なし

現在、要素は上端に揃えられます: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

例 . flex-start 値 + 要素のサイズ指定

現在、要素は引き続き上端に揃えられますが、幅と高さが指定されています: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . flex-end 値 + 要素のサイズ指定

現在、要素は下端に揃えられます: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  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>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . center 値、要素のサイズが異なる場合

現在、要素の高さは異なっています（ここではテキストによって高さが決まっていますが、heightを指定することもできます）。幅は width が指定されているためすべて同じです: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

例 . baseline 値、要素のサイズが異なる場合

ベースラインによる配置は次のようになります: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

例 . グリッド内での垂直軸始端への配置

グリッドセル内の要素を垂直軸の始端に揃えてみましょう: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: grid;
  align-items: flex-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>4</div>
  <div>5</div>
</div>
css#parent {
  display: grid;
  align-items: 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 id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: grid;
  align-items: 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;
}
#elem1 {
  
}

Результат:

開発者ツールでグリッドがどのように表示されるか見てみましょう:

関連項目

  • flex-direction プロパティ
    （フレックスボックスの軸の方向を設定します）
  • justify-content プロパティ
    （主軸方向の配置を設定します）
  • align-items プロパティ
    （交差軸方向の配置を設定します）
  • flex-wrap プロパティ
    （フレックスボックスの折り返しを設定します）
  • flex-flow プロパティ
    （flex-direction と flex-wrap の一括指定です）
  • order プロパティ
    （フレックスアイテムの表示順序を設定します）
  • align-self プロパティ
    （個々のアイテムの交差軸方向の配置を設定します）
  • flex-basis プロパティ
    （フレックスアイテムの基準サイズを設定します）
  • flex-grow プロパティ
    （フレックスアイテムの伸長率を設定します）
  • flex-shrink プロパティ
    （フレックスアイテムの縮小率を設定します）
  • flex プロパティ
    （flex-grow, flex-shrink, flex-basis の一括指定です）
Backjustify-content プロパティNextflex-wrap プロパティ