place-content

place-contentCSS一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわち align-content および justify-content) を、グリッドフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* 位置による配置 */
/* 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: revert;
place-content: revert-layer;
place-content: unset;

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

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

start

各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

end

各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

flex-start

各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。

flex-end

各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。

center

各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。

left

各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。

各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は 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 (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

safe

配置キーワードと並べて使用します。選択されたキーワードが、アイテムが配置コンテナーをオーバーフローしてデータ損失を引き起こす場合には、アイテムは代わりに、配置モードが start であるかのように配置されます。

unsafe

配置キーワードと並べて使用します。アイテムと配置コンテナーの相対サイズに関係なく、またデータ損失の原因となるオーバーフローが発生するかどうかに関係なく、指定された配置値が優先されます。

公式定義

初期値一括指定の次の各プロパティとして
適用対象複数行のフレックスコンテナー
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類離散値

形式文法

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

<align-content> =
normal |
<baseline-position> |
<content-distribution> |
<overflow-position>? <content-position>

<justify-content> =
normal |
<content-distribution> |
<overflow-position>? [ <content-position> | left | right ]

<baseline-position> =
[ first | last ]? &&
baseline

<content-distribution> =
space-between |
space-around |
space-evenly |
stretch

<overflow-position> =
unsafe |
safe

<content-position> =
center |
start |
end |
flex-start |
flex-end

フレックスコンテナーのコンテンツの配置

HTML

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 />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

CSS

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;
}

結果

仕様書

Specification
CSS Box Alignment Module Level 3
# place-content

ブラウザーの互換性

BCD tables only load in the browser

関連情報