flex-wrap 换行
flex-wrap 主要通过在外层容器中设置它里面的子项目是否可以换行。 默 认情况下项目是不换行的。
1. 官方定义
flex-wrap 属性 规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
2. 解释
默 认情况下，设置了 dis play:flex 的容器是不会换行的，这时候如果我们希望它换行就可以通过 flex-wrap 设置超出宽度换行，也可以设置它如何换行，既换行之后的排列的方向。
3. 语法
flex-wrap : Now rap|wrap|wrap-reverse|initial|inherit ;
属性 值
值 描述 Now rap 默 认值。规定灵活的项目不拆行或不拆列。 wrap 规定灵活的项目在必要的时候拆行或拆列。 wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 initial 设置该 属性 为它的 默 认值。请参阅 initial。 inherit 从父元素继承该 属性 。请参阅 inherit。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 10+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4
5. 实例
设置 一个 容器，当内部的 内容 超过容器的宽度时候向下换行。
.demo {
dis play : flex ;
flex-wrap : wrap ;
}
.item {
width : px ;
height : px ;
line-height : px ;
background : #ccc ;
border-right : px solid #fff ;
text-align : center ;
}
效果 图
换行 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.demo {
dis play : flex ;
flex-wrap : wrap ;
}
.item {
width : px ;
height : px ;
line-height : px ;
background : #ccc ;
border-right : px solid #fff ;
text-align : center ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
设置 一个 容器当内部的项目超过容器的宽度时候反向向下换行。
.demo {
dis play : flex ;
flex-wrap : wrap-reverse ;
}
.item {
width : px ;
height : px ;
line-height : px ;
background : #ccc ;
border-right : px solid #fff ;
text-align : center ;
}
效果 图
换行反向 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.demo {
dis play : flex ;
flex-wrap : wrap-reverse ;
}
.item {
width : px ;
height : px ;
line-height : px ;
background : #ccc ;
border-right : px solid #fff ;
text-align : center ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
6. 小结
flex 弹性盒模型 默 认是不换行的既 Now rap
justify-content (轴内)对齐方式 ? ?flex-direction 排列方向