CSS の place-items 一括指定プロパティは、 {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
/* キーワード値 */ 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;
autojustify-items プロパティ、そうでなければ絶対位置であり、このような場合、 auto は normal を表します。normalstart の別名です。start のように動作し、その他の絶対位置ボックスには stretch のように動作します。stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。startendflex-startstart のように扱われます。flex-endend のように扱われます。self-startself-endcenterleftstart のように動作します。rightstart のように動作します。baseline
first baselinelast baselinefirst baseline の代替配置は start、last baseline の代替配置は end です。stretchauto のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。#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);
}
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;
}
<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">place-items: </label>
<select id="values">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="auto center">auto center</option>
<option value="normal start">normal start</option>
<option value="center normal">center normal</option>
<option value="start auto">start auto</option>
<option value="end normal">end normal</option>
<option value="self-start auto">self-start auto</option>
<option value="self-end normal">self-end normal</option>
<option value="flex-start auto">flex-start auto</option>
<option value="flex-end normal">flex-end normal</option>
<option value="left auto">left auto</option>
<option value="right normal">right normal</option>
<option value="baseline normal">baseline normal</option>
<option value="first baseline auto">first baseline auto</option>
<option value="last baseline normal">last baseline normal</option>
<option value="stretch auto">stretch auto</option>
</select>
</div>
var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
values.addEventListener('change', function (evt) {
container.style.placeItems = evt.target.value;
});
display.addEventListener('change', function (evt) {
container.className = evt.target.value;
});
{{EmbedLiveSample("Examples", 260, 290)}}
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}} | {{Spec2("CSS3 Box Alignment")}} | 初回定義 |
{{CSSInfo}}
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
{{Compat("css.properties.place-items.flex_context")}}
{{Compat("css.properties.place-items.grid_context")}}