flex-wrap: wrap; css3属性

Question

使用wrap多行效果之后，怎么让‘F’紧贴第一行，现在F是剩余高度，实现上下居中

Answer 1

#main{
  width: 100%;
  height: 250px;
  border: 1px solid #c3c3c3;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
}
#main div{
  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