CSSalign-items プロパティは、すべての直接の子要素のグループとして、 align-self の値を設定します。 align-self プロパティは包含ブロック内のアイテムの配置を設定します。

現在、このプロパティはフレックスボックスとグリッドレイアウトで対応しています。フレックスボックスでは、アイテムの交差軸方向の配置を制御します。グリッドレイアウトでは、アイテムのブロック軸方向の配置を制御します。

構文

/* 基本キーワード */ 
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; /* オーバーフロー配置 (位置指定要素のみ) */ 
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
そのアイテムは、互いにその軸の配置コンテナーの終点側の端に寄せられます。
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
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

フレックスレイアウトでの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 52
完全対応 52
部分対応 29
補足
補足 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.
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 20
補足
完全対応 20
補足
補足 Multi-line flexbox has been supported since Firefox 28.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 18 — ?
無効
無効 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.
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
IE 完全対応 11
補足
完全対応 11
補足
補足 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.
Opera 完全対応 12.1Safari 完全対応 7
接頭辞付き
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 52
完全対応 52
部分対応 4.4
補足
補足 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.
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 52
完全対応 52
部分対応 29
補足
補足 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.
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Multi-line flexbox has been supported since Firefox 28.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 18 — ?
無効
無効 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.
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
Opera Android 完全対応 12.1Safari iOS 完全対応 7
接頭辞付き
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
first baseline and last baselineChrome ? Edge ? Firefox 完全対応 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 45Opera Android ? Safari iOS ? Samsung Internet Android ?
start and endChrome ? Edge ? Firefox 完全対応 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 45Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome ? Edge ? Firefox 完全対応 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 45Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 63Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52IE ? Opera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.2

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

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