CSSplace-items 一括指定プロパティは、 align-items および justify-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 (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

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 の定義
草案 初回定義

ブラウザーの対応

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応59 ?45 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5959 ?45 ? ?7.0

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応59 ?45 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5959 ?45 ? ?7.0

関連情報

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

このページの貢献者: mfuji09
最終更新者: mfuji09,