浮动：做文字环绕效果

弹性盒：单行或单列布局

网格：多行多列布局

弹性盒

详细文档见MDN

弹性盒小游戏

生成弹性容器和弹性项目

默认情况下，弹性项目沿着主轴依次排列，侧轴拉伸

更改方向

通过flex-direction可更改主轴方向

主轴排列

通过justify-content属性，可以影响主轴的排列方式

侧轴排列

通过align-items属性，可以影响侧轴的排列方式

弹性项目伸缩

所谓伸缩，是指在主轴方向上，当弹性容器有额外空间时，是否需要拉伸，当空间不足时，是否需要压缩

在弹性项目上使用flex属性，可设置拉伸和压缩比例：flex: 拉伸比例 压缩比例 初始尺寸

拉伸示例：

压缩示例：

默认情况下，flex: 0 1 auto

主轴换行

默认情况，当主轴剩余空间不足时，按照压缩比例进行压缩，但如果设置了主轴换行，则不会压缩，直接换行显示

给弹性容器设置flex-wrap: wrap，即可主轴换行

尽管如此，多行多列仍然推荐使用网格布局

网格

MDN 详细文档

阮一峰网格布局教程

网格布局小游戏 > 网格布局是多行多列布局的终极解决方案

生成网格布局

容器生成网格布局后，其所有子元素为网格项目

定义行和列

grid-template-rows：定义行

grid-template-columns：定义列
它们的语法是相同的

改变排列方向

使用属性grid-auto-flow: column，可使子元素按列排放

单元格之间的间隙

1
2
3

row-gap: 10px; /* 行间隙为10px */
column-gap: 20px; /* 列间隙为20px */
gap: 10px 20px; /* 行间隙为10px，列间隙为20px */

单元格内部的对齐

默认情况下，网格项目在单元格内部水平和垂直拉伸，以撑满单元格

可以使用属性justify-items设置水平方向的排列方式

可以使用属性align-items设置垂直方向的排列方式

它们的可取值是相同的：

1
2

justify-items: start 左 | end 右 | center 中 | stretch 拉伸;
align-items: start 上 | end 下 | center 中 | stretch 拉伸;

可以使用速写属性place-items: 垂直对齐方式 水平对齐方式同时设置这两个值

1

place-items: start center; /* 垂直靠上，水平居中 */

网格项目定位

默认情况下，网格项目依次排列到单元格中，每个网格占据一个单元格

但可以对网格项目设置grid-area属性来改变这一行为

使用方式为：

1

grid-area: 起始行线编号/起始列线编号/结束行线编号/结束列线编号;