CSSplace-content 一括指定プロパティは、 align-content 及び justify-content プロパティの両方を設定します。

構文

/* 位置による配置 */
/* align-content は left 及び right の値を取りません */
place-content: center start;  
place-content: start center; 
place-content: end left; 
place-content: flex-start center;
place-content: flex-end center; 

/* ベースラインによる配置 */
/* justify-content は baseline の値を取りません */
place-content: baseline center; 
place-content: first baseline space-evenly; 
place-content: last baseline right;

/* 均等配置 */
place-content: space-between space-evenly; 
place-content: space-around space-evenly;
place-content: space-evenly stretch; 
place-content: stretch space-evenly; 

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

最初の値は align-content プロパティ値で、二番目の値は justify-content の値です。

重要: 二番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。

start
各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
end
各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
flex-start
各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
flex-end
各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
center
各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。
left
各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
right
各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
space-between
各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
baseline
first baseline

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

CSS

#container {
  display: flex;
  height:240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /* Can be changed in the live sample */
  direction: ltr; /* Can be changed in the live sample */
  place-content: flex-end center; /* Can be changed in the live sample */
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}

HTML

<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br/>ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br/>impsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
place content の定義
草案 初回定義

初期値normal
適用対象multi-line flex containers
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
Supported in Flex Layout59 なし あり なし あり あり
Supported in Grid Layout59 なし53 なし あり あり
You can only specify a single value if it is valid for both align-content and justify-content あり なし60 なし あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Supported in Flex Layout5959 ? あり あり ?7.0
Supported in Grid Layout5959 ?53 あり ?7.0
You can only specify a single value if it is valid for both align-content and justify-content あり あり ?60 ? ? あり

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応571645 なし4410.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応575716454410.36.0

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応571645 なし4410.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応575716454410.36.0

関連情報

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

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