84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
使用wrap多行效果之后,怎么让‘F’紧贴第一行,现在F是剩余高度,实现上下居中
小伙看你根骨奇佳,潜力无限,来学PHP伐。
#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,我们能创建一个拥有多条FlexLine的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
flex-wrap 直到现在为止,每个Flex 容器只有一条Flex Line,使用flex-wrap,我们能创建一个拥有多条FlexLine的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
应该使用align-content来定义flex-wrap的行为,这个和align-item有点相似,不过align-item是控制flex item,而align-content控制Flex Line.
相关资料可以看我博文或看下面: