CSS flex 伸缩盒模型详解

flex box 弹性盒模型

版本兼容性

Tables	IE	Edge	Firefox	Chrome	Safari	Safari IOS	Opear Mnin	Chrome(Move)	UC
-webkit-flex	11	16	59	49	11	10.3	all	66	11.8
flex	11	16	59	49	11	10.3	all	66	11.8
-webkit-box			59	49	11	10.3	all	66	11.8
-moz-box			59	49	11	10.3	all	66	11.8
-ms-flexbox	11	16	59	49	11	10.3	all	66	11.8

兼容方案

弹性容器

.box {
    display: -webkit-flex; /* new: Chrome 21+ */
    display: flex;         /* new: Opera 12.1, Firefox 22+ */
    display: -webkit-box;  /* old */
    display: -moz-box;     /* old: Firefox */
    display: -ms-flexbox;  /* IE 10 */
}

子元素

.flex {
    -webkit-flex: 1;     /* Chrome */
    -ms-flex: 1          /* IE 10 */
    flex: 1;             /* NEW, Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;    /* OLD - Firefox 19- */
}

伸缩盒（旧）[ -moz、 -webkit ]

弹性容器 box

.box {
    display: -moz-box; /* Firefox */
    display: -webkit-box; /* Safari 、Opera 、Chrome */
    display: box;
}

容器属性

1. 主轴对齐方式 box-pack

• 语法：box-pack: start | end | center | justify
  左对齐 | 右对齐 | 居中对齐 | 两端对齐

2. 侧轴对齐方式

• 语法：box-align: start | end | center | baseline | stretch
  顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满

伸缩盒（新）