前端布局方式之(flex弹性盒子模型)与兼容

容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1.flex-direction属性

(flex-direction:row)

row.png

(flex-direction:row-reverse)

row-reverse.png

(flex-direction:column)

column.png

(flex-direction:column-reverse)

column-reverse.png

*兼容性
新写法flex-direction的兼容

image

旧写法box-orient和box-direction兼容一样的

image

可以看出，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)

nowrap.png

(flex-wrap:wrap)

wrap.png

(flex-wrap-reverse)

wrap-reverse.png

*兼容性
定义子元素换行情况

新写法flex-wrap 兼容如下

image

旧写法box-lines:single/multiple(盒子行数：单行/多行)
默认single 兼容如下

image

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)

center.png

(justify-content:flex-start)

start.png

(justify-content:flex-end)

end.png

(justify-content:space-between)

between.png

(justify-content:space-around)

around.png

*兼容性
横向排列布局

新版本justify-content的兼容情况

image

旧版本box-pack的兼容情况

image

故兼容可写成：

-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-start

(align-items: flex-end)

align-items: flex-end

(align-items: center)

align-items: center

(align-items:stretch)

align-items:stretch

(align-items:baseline)
项目的第一行文字的基线对齐。

baseline.png

竖向排列布局

新版本align-items兼容情况

image

旧版本box-align的兼容情况

image

故兼容性可写成：

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:center).png

(align-content:flex-start)

align-content:flex-start.png

(align-content:space-between)

spacebetween.png

(align-content:space-around)

spacearound.png

(align-content:stretch)

stretch.png

*伸缩盒子兼容
伸缩盒子布局兼容

新版本flex:num兼容

image

旧版本box-flex兼容

image

故兼容性可写成

box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;