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

形式文法

<'align-content'> <'justify-content'>?

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
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 59Edge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 59Chrome Android 完全対応 59Edge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 7.0
Supported in Grid LayoutChrome 完全対応 59Edge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 59Chrome Android 完全対応 59Edge Mobile ? Firefox Android 完全対応 53Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 7.0
You can only specify a single value if it is valid for both align-content and justify-contentChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 60IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 60Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 45IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 完全対応 16Firefox Android 完全対応 45Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 45IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 完全対応 16Firefox Android 完全対応 45Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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

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