#main{ width: 100%; height: 250px; border: 1px solid #c3c3c3; display:flex; flex-wrap:wrap; align-content:flex-start; } #main p{ width: 20%; height:100px; }

应该使用align-content来定义flex-wrap的行为,这个和align-item有点相似,不过align-item是控制flex item,而align-content控制Flex Line.
相关资料可以看我博文或看下面:

flex-wrap 直到现在为止,每个Flex 容器只有一条Flex Line,使用flex-wrap,我们能创建一个拥有多条Flex
Line的Flex 容器

• nowrap(default)

• wrap

• wrap-reverse 设置为wrap时,假如我们一行空间不够,我们的flex item在空间不足时会进行换行.创建新的一行. 设置为wrap-reverse时,在wrap换行效果的同时,将会反向展现

align-content
该属性定义了flex-wrap的行为,这和align-item有点相似,但是和其不同的是该属性align的是Flex Line.

• stretch(default)

• flex-start

• flex-end

• center

• space-between

• space-around