We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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-axis 上でライン内の中央に置かれます。アイテムの cross-size が flex コンテナより大きい場合は、両方向へ均等にはみ出します。
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; /* ライブサンプルで変更可能 */
  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
基本対応211

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
基本対応4.4 ?

あり

あり -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.

関連情報

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

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