place-content
place-content
は CSS の一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわち align-content
および justify-content
) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。
試してみましょう
構成要素のプロパティ
このプロパティは以下の 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: unset;
最初の値は align-content
プロパティの値で、2 番目の値は justify-content
の値です。
メモ: 2 番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。
値
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
の代替配置はstart
、last baseline
の代替配置はend
です。 space-around
-
各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
space-evenly
-
各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。
stretch
-
各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が
auto
のアイテムは、max-height
/max-width
(または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | 複数行のフレックスコンテナー |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
形式文法
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
<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
#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
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナー内のアイテムの配置
- CSS グリッドガイド: グリッドレイアウトのボックス配置
- CSS ボックス配置
align-content
プロパティjustify-content
プロパティ