Flex弹性布局
display: flex
开启Flex布局模式。将一个元素设置为Flex容器，其直接子元素将成为Flex项目。
.container {
display: flex;
}
flex-direction
定义主轴方向（项目排列方向）。可选值：
- row（默认）：水平方向，从左到右。
- row-reverse：水平方向，从右到左。
- column：垂直方向，从上到下。
- column-reverse：垂直方向，从下到上。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
控制当一行空间不足时是否换行。可选值：
- nowrap（默认）：不换行，项目可能溢出容器。
- wrap：换行，项目在多行中排列。
- wrap-reverse：换行，第一行在下方，后续行向上排列。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
justify-content
定义主轴上的对齐方式。可选值：
- flex-start（默认）：项目向起点对齐。
- flex-end：项目向终点对齐。
- center：项目居中对齐。
- space-between：项目间均匀分配间隔，第一个和最后一个项目分别贴靠容器两端。
- space-around：项目间均匀分配间隔，项目两侧间隔相等。
- space-evenly：项目间均匀分配间隔，项目与容器边缘和项目之间的间隔相等。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
align-items
定义交叉轴上的对齐方式。可选值：
- stretch（默认）：项目拉伸填满整个交叉轴。
- flex-start：项目向交叉轴起点对齐。
- flex-end：项目向交叉轴终点对齐。
- center：项目在交叉轴居中对齐。
- baseline：项目按基线对齐。
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
align-content
仅在多行Flex布局（flex-wrap: wrap）中生效，定义多行项目在交叉轴上的对齐方式。可选值：
- stretch（默认）：各行拉伸填满整个交叉轴。
- flex-start：各行向交叉轴起点对齐。
- flex-end：各行向交叉轴终点对齐。
- center：各行在交叉轴居中对齐。
- space-between：各行间均匀分配间隔，第一行和最后一行分别贴靠容器两端。
- space-around：各行间均匀分配间隔，行两侧间隔相等。
.container {
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
order
定义项目的排列顺序。数值越小，排列越靠前。默认值为0。
.item {
order: <integer>;
}
flex-grow
定义项目的放大比例。默认值为0，表示不放大。如果所有项目设置为非零值，则按照比例分配剩余空间。
.item {
flex-grow: <number>; /* 默认为0 */
}
flex-shrink
定义项目的缩小比例。默认值为1，表示可以缩小。如果所有项目设置为非零值，则按照比例收缩以防止溢出容器。
.item {
flex-shrink: <number>; /* 默认为1 */
}
flex-basis
定义项目在分配剩余空间之前的初始大小。可接受长度、百分比、auto（默认）或content值。
.item {
flex-basis: <length> | <percentage> | auto | content;
}
flex
flex-grow, flex-shrink, 和 flex-basis 的简写形式。默认值为 0 1 auto。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
align-self
覆盖容器的 align-items 属性，定义单个项目在交叉轴上的对齐方式。可选值同 align-items。
.item {
align-self: auto | stretch | flex-start | flex-end | center | baseline;
}
Grid网格布局
display: grid;
开启Grid布局模式。将一个元素设置为Grid容器，其直接子元素将成为Grid项目（单元格）。
.container {
display: grid;
}
grid-template-columns 和 grid-template-rows
定义网格的列和行轨道（track）大小。可接受长度、百分比、fr（fraction单位，表示网格空间的分数）或auto值。还可以使用repeat()函数创建重复轨道，以及使用minmax()函数定义轨道的最小和最大尺寸。
.container {
grid-template-columns: <track-size> ... | repeat(<number>, <track-size>) | auto-fill | auto-fit;
grid-template-rows: <track-size> ... | repeat(<number>, <track-size>) | auto-fill | auto-fit;
}
/* 示例 */
.container {
grid-template-columns: 1fr 2fr 1fr; /* 三列，宽度比例为1:2:1 */
grid-template-rows: 50px auto 1fr; /* 三行，第一行为50px，第二行为自适应高度，第三行为剩余空间 */
}
grid-template-areas
定义网格布局的区域（area），通过命名项目并用字符串描述网格结构。项目名称用.表示空白单元格。
.container {
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
}
/* 对应的项目需设置grid-area属性 */
.item1 {
grid-area: header;
}
.item2 {
grid-area: nav;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: sidebar;
}
.item5 {
grid-area: footer;
}
grid-gap 或 grid-column-gap 和 grid-row-gap
设置网格内项目间的间距（gap）。接受长度或百分比值。
.container {
grid-gap: <grid-row-gap> <grid-column-gap>; /* 简写形式，同时设置行和列间距 */
grid-row-gap: <length> | <percentage>; /* 单独设置行间距 */
grid-column-gap: <length> | <percentage>; /* 单独设置列间距 */
}
/* 示例 */
.container {
grid-gap: 10px 20px; /* 行间距10px，列间距20px */
}
grid-auto-columns 和 grid-auto-rows
定义自动填充网格时新添加行或列的轨道大小。当项目超出已定义的网格范围时生效。
.container {
grid-auto-columns: <track-size> ... | repeat(<number>, <track-size>);
grid-auto-rows: <track-size> ... | repeat(<number>, <track-size>);
}
/* 示例 */
.container {
grid-auto-rows: minmax(100px, auto); /* 新添加的行最小高度为100px，最大高度自适应内容 */
}
grid-auto-flow
控制网格项目如何自动填充和排列。可选值：
- row（默认）：按行填充。
- column：按列填充。
- dense：当row或column与dense一起使用时，如果网格中有空缺，新项目将尝试填补这些空缺，而非仅仅添加到网格末尾。
.container {
grid-auto-flow: row | column | row dense | column dense;
}
grid-column-start、grid-column-end、grid-row-start 和 grid-row-end
手动指定项目在网格中的起始和结束位置。
.item {
grid-column-start: <line-number> | <name> | auto;
grid-column-end: <line-number> | <name> | span <number> | auto;
grid-row-start: <line-number> | <name> | auto;
grid-row-end: <line-number> | <name> | span <number> | auto;
}
/* 示例 */
.item {
grid-column: 1 / 3; /* 等同于 grid-column-start: 1; grid-column-end: 3;，占据第一列到第三列 */
grid-row: 2 / span 2; /* 等同于 grid-row-start: 2; grid-row-end: span 2;，从第二行开始，跨两行 */
}
grid-area
简写属性，用于同时设置grid-row-start、grid-column-start、grid-row-end和grid-column-end，或引用在grid-template-areas中定义的区域名称。
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
/* 示例 */
.item {
grid-area: header; /* 引用在grid-template-areas中定义的区域名称 */
}
CSS Grid 与 Flexbox 结合
在某些情况下，我们可以结合CSS Grid和Flexbox的优点，创建更复杂的响应式布局。
/* 容器样式 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应列宽 */
grid-gap: 10px;
padding: 10px;
}
/* 子元素样式 */
.container > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
/* 响应式布局 */
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* 单列布局 */
}
.container > div {
height: 100%; /* 保持子元素高度 */
}
}
首先使用CSS Grid创建了一个自适应列宽的网格布局。每个网格项（子元素）内部使用Flexbox，使内容垂直居中。当屏幕宽度小于768px时，通过媒体查询切换到单列布局，以适应移动设备。
Flexbox 与 Grid 的选择
选择使用Flexbox还是Grid，通常取决于具体的需求：
- Flexbox 适合处理一维布局，比如行或列中的元素排列，以及元素的对齐和填充。
- CSS Grid 更适合处理二维布局，如表格或复杂网格布局，以及精确的单元格控制。
