容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction属性
(flex-direction:row)
(flex-direction:row-reverse)
(flex-direction:column)
(flex-direction:column-reverse)
*兼容性
新写法flex-direction的兼容
旧写法box-orient和box-direction兼容一样的
可以看出,ie11下版本还是不支持方向这属性,其他浏览器要加前缀,所以当要定义方向时这个兼容可以写成
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;
___________________________________________________
达到flex-direction:row/row-reverse效果
box-orient:horizontal
box-direction:normal/reverse
达到flex-direction:column/column-reverse效果
box-orient:vertical
box-direction:normal/reverse
2.flex-wrap属性
(flex-wrap:nowrap)
(flex-wrap:wrap)
(flex-wrap-reverse)
*兼容性
定义子元素换行情况
新写法flex-wrap 兼容如下
旧写法box-lines:single/multiple(盒子行数:单行/多行)
默认single 兼容如下
ie11下还是不支持此属性,上面firefox不支持但在25版本后是支持的,还是要用flex加-moz, 比较直观所以定义子元素换行时 可以如下写法
-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
3.flex-flow属性
上面两个属性的合写
.box {
flex-flow: ;
}
4.justify-content
(定义了主轴对齐方式)
(justify-content:center)
(justify-content:flex-start)
(justify-content:flex-end)
(justify-content:space-between)
(justify-content:space-around)
*兼容性
横向排列布局
新版本justify-content的兼容情况
旧版本box-pack的兼容情况
故兼容可写成:
-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;
5.align-items
align-items属性定义项目在交叉轴上如何对齐。
(align-items: flex-start)
(align-items: flex-end)
(align-items: center)
(align-items:stretch)
(align-items:baseline)
项目的第一行文字的基线对齐。
竖向排列布局
新版本align-items兼容情况
旧版本box-align的兼容情况
故兼容性可写成:
align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;
6.align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
(align-content:center)
(align-content:flex-start)
(align-content:space-between)
(align-content:space-around)
(align-content:stretch)
*伸缩盒子兼容
伸缩盒子布局兼容
新版本flex:num兼容
旧版本box-flex兼容
故兼容性可写成
box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;