web开发弹性盒模型flexbox新旧比较

一、flexbox弹性盒子布局

兼容性：

• iOS可以使用最新的flex布局
• Android4.4以下，只能兼容旧版的flexbox布局
• Android4.4及以上，可以使用最新的flex布局

注：

• CSS的columns在伸缩容器上没有效果。
• float、clear和vertical-align在伸缩项目上没有效果。

首先还是从两个版本的语法开始讲吧。

<div class = "box">
    <div class = "item">
    </div>
</div>

新旧对比：

定义容器的display属性

旧版本写法

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

新版本写法

定义伸缩容器，是内联还是块取决于设置的值。这个时候，他的所有子元素将变成flex文档流，称为伸缩项目。

.box{
    display: -webkit-flex; 
    display: flex;
}

.box{
   display: -webkit-inline-flex; 
   display:inline-flex;
}

容器属性

旧版本写法

旧版本的属性和新版本的属性设置不同，具体如下：

1 . box-pack 属性：定义子元素主轴对齐

.box{
    -moz-box-pack: center; /* Firefox */
    -webkit-box-pack: center;  /* Safari 和 Chrome */
    box-pack: center;
}

box-pack: start | end | center | justify;

2 . box-align 属性：定义子元素交叉轴对齐方式。

.box{
    -moz-box-align: center; /* Firefox */
    -webkit-box-align: center;  /* Safari 和 Chrome */
    box-align: center;
}

box-align: start | end | center | baseline | stretch;

3 . box-direction 属性：定义子元素的显示方向。

.box{
    -moz-box-direction: reverse; /* Firefox */
    -webkit-box-direction: reverse; /* Safari 和 Chrome */
    box-direction: reverse;
}

box-direction: normal | reverse | inherit;

4 . box-orient 属性：定义子元素是否应水平或垂直排列。

.box{
    -moz-box-orient: horizontal; /* Firefox */
    -webkit-box-orient: horizontal; /* Safari 和 Chrome */
    box-orient: horizontal;
}

box-orient: horizontal | vertical | inline-axis | block-axis |inherit;

5 . box-lines 属性: 定义当子元素超出了容器是否允许子元素换行。

.box{
    -moz-box-lines: multiple; 
    -webkit-box-lines: multiple; 
    box-lines: multiple;
}

box-lines: single | multiple;

新版本写法

1.flex-direction: 定义了伸缩项目放置在伸缩容器的方向（行或者列）。

flex-direction: row | row-reverse | column | column-reverse;

2.flex-wrap: 主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

3.flex-flow: 这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。

flex-flow: < flex-direction> || < flex-wrap>;

4.justify-content: 当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。

justify-content: flex-start | flex-end | center | space-between | space-around;

解释：

• flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

• flex-end：伸缩项目向一行的结束位置靠齐。

• center：伸缩项目向一行的中间位置靠齐。

• space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。

• space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
  

5.align-items: 主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。可以把他想像成侧轴（垂直于主轴）的“justify-content”。

align-items: flex-start | flex-end | center | baseline | stretch;

解释：

• flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

• flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

• center：伸缩项目的外边距盒在该行的侧轴上居中放置。

• baseline：伸缩项目根据他们的基线对齐。

• stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

6.align-content: 用来调准伸缩行在伸缩容器里的对齐方式。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

解释：
- flex-start：各行向伸缩容器的起点位置堆叠。
- flex-end：各行向伸缩容器的结束位置堆叠。
- center：各行向伸缩容器的中间位置堆叠。
- space-between：各行在伸缩容器中平均分布。
- space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。
- stretch（默认值）：各行将会伸展以占用剩余的空间。

子元素属性

旧版本写法

1.box-flex 属性:定义是否允许当前子元素伸缩。

.item{
    -moz-box-flex: 1.0; /* Firefox */
    -webkit-box-flex: 1.0; /* Safari 和 Chrome */
    box-flex: 1.0;
}

box-flex属性使用一个浮点值：

.item{
    box-flex: <value>;
}

2.box-ordinal-group 属性:定义子元素的显示次序，数值越小越排前。

.item{
    -moz-box-ordinal-group: 1; /* Firefox */
    -webkit-box-ordinal-group: 1; /* Safari 和 Chrome */
    box-ordinal-group: 1;
}

box-direction属性使用一个整数值：

.item{
    box-ordinal-group: <integer>;
}

新版本写法

1.order：默认情况下，伸缩项目是按照文档流出现先后顺序排列。然而，“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

order: integer;

2.flex-grow: 根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

flex-grow: number;

3.flex-shrink: 根据需要用来定义伸缩项目收缩的能力。

flex-shrink: number;

4.flex-basis: 用来设置伸缩基准值，剩余的空间按比率进行伸缩。

flex-basis: length | auto;

5.flex: 是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

5.align-self: 用来在单独的伸缩项目上覆写默认的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

兼容写法

首先是定义容器的display属性：

.box{
    display: -webkit-box; 
    /*display: -moz-box;      手机端已兼容，可以不写*/
    /*display: -ms-flexbox;   手机端已兼容*/
    display: -webkit-flex; 
    display: flex; 
}

子元素主轴对齐方式

.box{
    -webkit-box-pack: center;
    /*-moz-justify-content: center;*/
    /*-webkit-justify-content: center;*/
    justify-content: center;
}

子元素交叉轴对齐方式

.box{
    -webkit-box-align: center;
    /*-moz-align-items: center;
    -webkit-align-items: center;*/
    align-items: center;
}

子元素的显示方向

子元素的显示方向可通过box-direction + box-orient + flex-direction实现：

左到右

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    /*-moz-flex-direction: row;*/
    -webkit-flex-direction: row;
    flex-direction: row;
}

右到左

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    /*-moz-flex-direction: row-reverse;*/
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

这里补充说明一点： box 写法的 box-direction只是改变了子元素的排序，并没有改变对齐方式，需要新增一个box-pack来改变对齐方式。

上到下

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    /*-moz-flex-direction: column;*/
    -webkit-flex-direction: column;
    flex-direction: column;
}

下到上

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    /*-moz-flex-direction: column-reverse;*/
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

是否允许子元素伸缩

.item{
    -webkit-box-flex: 1.0;
    /*-moz-flex-grow: 1;*/
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.item{
    -webkit-box-flex: 1.0;
    /*-moz-flex-shrink: 1;*/
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}

上面是允许放大，box语法中box-flex如果不是0就表示该子元素允许伸缩，而flex是分开的，上面flex-grow是允许放大（默认不允许），下面的flex-shrink是允许缩小（默认允许）。box-flex默认值为0，也就是说，在默认的情况下，在两个浏览器中的表现是不一样的：

这里还有一点，就是新旧语法的算法是不一样的，假设box-flex的值不等于0，旧语法中，如果有多余的空间，box-flex的值越大，说明空白部分的占比越多，反之亦然：

而新版的语法中，放大的比例是直接按flex-grow的值来分配的，flex-grow的缩放会覆盖flex-shrink:0，看例子：

参数：

.item{
    box-flex: <value>;
    flex-grow: <number>;
    flex-shrink: <number>; 
}

子元素的显示次序

.item{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}

附：flebox可以用来设定子元素不定宽高垂直水平居中，普通样式是这样的：

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
}

flexbox版：

.wraper {
     justify-content: center;
     align-items: center;
     display: -webkit-flex;
 } 

更多精彩内容请访问：前端博客