CSSalign-items プロパティは、ブラウザーがどのようにコンテナーの垂直軸方向において、フレックス項目間の空白を配分するかを定義します。これは垂直方向において、 justify-content のように動作するということです。

align-content プロパティとの違いは、 align-items が現在のフレックスコンテナーの行の中での配置を指定するのに対し、 align-content は行そのものの配置を指定することです。

構文

/* 基本キーワード */ 
align-items: normal; 
align-items: stretch; 

/* 位置による配置 */ 
/* align-items は左と右の値を取りません */
align-items: center; /* 項目を中央付近に配置する */ 
align-items: start; /* 項目を開始位置に配置する */ 
align-items: end; /* 項目を終了位置に配置する */ 
align-items: flex-start; /* フレックス項目を開始位置に配置する */ 
align-items: flex-end; /* フレックス項目を終了位置に配置する */ 
align-items: self-start; 
align-items: self-end; 

/* ベースラインに配置する */
align-items: baseline; 
align-items: first baseline; 
align-items: last baseline; /* Overflow alignment (for positional alignment only) */ 
align-items: safe center; 
align-items: unsafe center; 

/* グローバル値 */
align-items: inherit; 
align-items: initial; 
align-items: unset;

normal
キーワードの効果は現在のレイアウトモードに依存します。
  • 絶対配置のレイアウトでは、このキーワードは置換絶対配置ボックスにおける start のように動作し、他のすべての絶対配置ボックスでは stretch として動作します。
  • 絶対配置レイアウトの静的位置では、キーワードは stretch として動作します。
  • フレックス項目については、このキーワードは stretch として動作します。
  • グリッド項目については、このキーワードは stretch の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は start のように動作します。
  • このプロパティはブロックレベルボックスや、表のセルには適用されません。
flex-start
フレックス項目の cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。
flex-end
フレックス項目の cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。
center
フレックス項目のマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。
start
その項目は、互いにその軸の配置コンテナーの始点側の端に寄せられます。
end
その項目は、互いにその軸の配置コンテナーの終点側の端に寄せられます。
center
その項目は、互いに配置コンテナーの中央に向けて寄せられます。
self-start
その項目は、その軸の配置コンテナーで、その項目の始点側の端に寄せられます。
self-end
その項目は、その軸の配置コンテナーで、その項目の終点側の端に寄せられます。
baseline
first baseline
last baseline
すべてのフレックス項目は、ベースラインが一直線になるように配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大の項目が、ラインの cross-start の端に寄せられます。
stretch
項目のマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
safe
項目の大きさが配置コンテナーをあふれる場合は、項目は配置モードが start であるかのように配置されます。
unsafe
項目と配置コンテナーの寸法の関係に関わらず、与えられた配置の値が強行されます。

形式文法

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

CSS

#container {
  height:200px;
  width: 240px;
  align-items: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
align-items の定義
草案 最新の構文定義に更新。
CSS Flexible Box Layout Module
align-items の定義
勧告候補 初回定義

初期値normal
適用対象全要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

フレックスボックスでの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

52

291

21 -webkit-

12

12 -webkit-

202

49 -webkit-

18 —?3

48 -webkit- 4

11512.17 -webkit-
first baseline and last baseline ? ?45 ? ? ?
start and end ? ?45 ? ? ?
left and right ? ?45 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

52

291

21 -webkit-

52

291

21 -webkit-

あり

あり -webkit-

202

49 -webkit-

18 —?3

48 -webkit- 4

12.17 -webkit- ?
first baseline and last baseline ? ? ?45 ? ? ?
start and end ? ? ?45 ? ? ?
left and right ? ? ?45 ? ? ?

1. Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

2. Multi-line flexbox has been supported since Firefox 28.

3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.

グリッドレイアウトでの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応571652 ?4410.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5752 あり524410.36.2

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, fscholz, teoli, ethertank
最終更新者: mfuji09,