place-items

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

CSSplace-items一括指定プロパティで、アイテムをブロック方向とインライン方向の両方に一度に配置します。これは align-items および justify-items プロパティの値を設定します。 2 つ目の値が設定されていない場合、1 つ目の値が使用されます。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* キーワード値 */
place-items: center;
place-items: normal start;
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: anchor-center;

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

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

以下の形のいずれかです。

  • 単一の align-items 値で、ブロック方向とインライン方向の両方の配置を設定するために使用します。
  • ブロック方向の配置を設定する align-items 値に、インライン方向の配置を設定する justify-items 値が続きます。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類離散値

形式文法

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

<align-items> =
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center

<justify-items> =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

フレックスコンテナー内でのアイテムの配置

フレックスボックスでは、主軸のアイテムがグループとして扱われるため、justify-selfjustify-items したがって、2 番目の値は無視されます。

CSS

css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* リストの選択肢を変更することで、この値を変更できます */
  background-color: #8c8c8c;
  display: flex;
}

結果

グリッドコンテナーでのアイテムの配置

以下のグリッドコンテナーのアイテムは、配置されるグリッド領域よりも小さいため、place-items はブロック方向とインライン方向にアイテムを移動します。

CSS

css
#grid-container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* リストの選択肢を変更することで、この値を変更できます */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#grid-container > div {
  width: 50px;
}

結果

仕様書

Specification
CSS Box Alignment Module Level 3
# place-items-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
place-items
anchor-center
Experimental
Supported in Flex Layout
Supported in Grid Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報