Flexbox 與 Grid
內容對齊align-content
Controlling how multiple rows or columns are aligned along its cross axis.
Overview
| Class | Declarations |
|---|---|
content-normal | align-content: normal;
|
content-baseline | align-content: baseline;
|
content-center | align-content: center;
|
content-stretch | align-content: stretch;
|
content-start | align-content: start;
|
content-end | align-content: end;
|
content-flex-start | align-content: flex-start;
|
content-flex-end | align-content: flex-end;
|
content-around | align-content: space-around;
|
content-between | align-content: space-between;
|
content-evenly | align-content: space-evenly;
|
align-content:<value> | align-content: <value>;
|
Examples
Align multiple rows or tracks
Use content-* utilities to distribute rows in a multi-line flex container or tracks in a grid container along the cross axis.
<div class="flex flex-wrap content-between h:64x"> ...</div>Generated CSS
@layer utilities { .content-between { align-content: space-between } .flex { display: flex } .flex-wrap { flex-wrap: wrap } .h\:64x { height: 16rem }}Center wrapped lines
Use content-center when the group of rows should sit in the middle of the container.
<section class="grid content-center h:64x"> ...</section>align-content needs extra space in the cross axis. If there is only one line or no free space, it may not visibly change the layout.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="content-start content-between@sm content-start@print">...</div>Use align-items for item alignment within each row.