Flexbox 與 Grid
內容位置place-content
Setting align-content and justify-content at the same time.
Overview
| Class | Declarations |
|---|---|
place-content:normal | place-content: normal;
|
place-content:baseline | place-content: baseline;
|
place-content:center | place-content: center;
|
place-content:stretch | place-content: stretch;
|
place-content:start | place-content: start;
|
place-content:end | place-content: end;
|
place-content:flex-start | place-content: flex-start;
|
place-content:flex-end | place-content: flex-end;
|
place-content:space-around | place-content: space-around;
|
place-content:space-between | place-content: space-between;
|
place-content:space-evenly | place-content: space-evenly;
|
place-content:<align-content>|<justify-content> | place-content: <align-content> <justify-content>;
|
Examples
Align grid or wrapped flex content on both axes
Use place-content:* as shorthand for align-content and justify-content.
<div class="grid place-content:center h:64x"> ...</div>Generated CSS
@layer utilities { .grid { display: grid } .place-content\:center { place-content: center } .h\:64x { height: 16rem }}Use separate axis values
Pass two values when block and inline distribution should differ.
<section class="grid place-content:start|space-between"> ...</section>Use place-items for item alignment inside grid areas, not distribution of the tracks as a group.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="place-content:start place-content:center@sm place-content:start@print">...</div>place-content is visible only when the container has extra space to distribute.