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.
CSS の place-items
は一括指定プロパティで、アイテムをブロック方向とインライン方向の両方に一度に配置します。これは align-items
および justify-items
プロパティの値を設定します。 2 つ目の値が設定されていない場合、1 つ目の値が使用されます。
試してみましょう
構成要素のプロパティ
このプロパティは以下の 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-self
や justify-items
したがって、2 番目の値は無視されます。
CSS
#container {
height: 200px;
width: 240px;
place-items: stretch; /* リストの選択肢を変更することで、この値を変更できます */
background-color: #8c8c8c;
display: flex;
}
結果
グリッドコンテナーでのアイテムの配置
以下のグリッドコンテナーのアイテムは、配置されるグリッド領域よりも小さいため、place-items
はブロック方向とインライン方向にアイテムを移動します。
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
place-items | ||||||||||||
anchor-center | ||||||||||||
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.