html5 - flex-wrap: wrap; css3属性
本文介绍了html5 - flex-wrap: wrap; css3属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用wrap多行效果之后,怎么让‘F’紧贴第一行,现在F是剩余高度,实现上下居中
解决方案
#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
这篇关于html5 - flex-wrap: wrap; css3属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文