place-items

CSSplace-items 一括指定プロパティは、 align-items および justify-items プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。

構文

/* キーワード値 */
place-items: auto center;
place-items: normal start;

/* 位置による配置 */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/* ベースラインによる配置 */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

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

auto
使用される値は、ボックスに親があれば、親ボックスの justify-items プロパティ、そうでなければ絶対位置であり、このような場合、 autonormal を表します。
normal
このキーワードの効果は、現在のレイアウトモードに依存します。
  • ブロックレベルレイアウトでは、このキーワードは start の別名です。
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように動作し、その他の絶対位置ボックスには stretch のように動作します。
  • 表のセルレイアウトでは、このキーワードは意味を持たず、無視されます。
  • フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、無視されます。
  • グリッドレイアウトでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。
start
各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
end
各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
flex-start
アイテムは、配置コンテナーの主軸または交差軸の先頭側の端に向けて、互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
flex-end
アイテムは、配置コンテナーの主軸または交差軸の末尾側の端に向けて、互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
self-start
アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
self-end
アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
center
各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。
left
各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
right
各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
baseline
first baseline

last baseline
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
stretch
各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 max-height/max-width (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

形式文法

<'align-items'> <'justify-items'>?

CSS

#container {
  height:200px;
  width: 240px;
  place-items: center; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
}

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

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

Result

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
place-items の定義
草案 初回定義
初期値一括指定の各プロパティとして
適用対象すべての要素
継承なし
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの互換性

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 59Edge 完全対応 79Firefox 完全対応 45IE 未対応 なしOpera 完全対応 46Safari 完全対応 11WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 45Opera Android 完全対応 43Safari iOS 完全対応 11Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Grid LayoutChrome 完全対応 59Edge 完全対応 79Firefox 完全対応 45IE 未対応 なしOpera 完全対応 46Safari 完全対応 11WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 45Opera Android 完全対応 43Safari iOS 完全対応 11Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報