place-content

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 59Edge 未対応 なしFirefox 完全対応 45
補足
完全対応 45
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 9WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 45
補足
完全対応 45
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
Opera Android 完全対応 ありSafari iOS 完全対応 9Samsung Internet Android 完全対応 7.0
Supported in Grid LayoutChrome 完全対応 59Edge 未対応 なしFirefox 完全対応 53
補足
完全対応 53
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 11WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 53
補足
完全対応 53
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
Opera Android 完全対応 ありSafari iOS 完全対応 11Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 59Edge 未対応 なしFirefox 完全対応 45
補足
完全対応 45
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 9WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 45
補足
完全対応 45
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
Opera Android 完全対応 ありSafari iOS 完全対応 9Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Grid LayoutChrome 完全対応 59Edge 未対応 なしFirefox 完全対応 53
補足
完全対応 53
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 11WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 53
補足
完全対応 53
補足
補足 Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.
Opera Android 完全対応 ありSafari iOS 完全対応 11Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報