Flex布局兼容知识点总结

Flex布局兼容知识点总结

假设父容器class为 box,子项目为item.
旧版语法以下：
一：定义容器的display属性。
旧语法以下写法：

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

新版语法须要以下写：

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

或者 行内

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

二：容器属性(旧版语法)
1. box-pack 属性;(水平方向上对齐方式)
box-pack定义子元素主轴对齐方式。

.box{
    -moz-box-pack: center; 
    -webkit-box-pack: center; 
    box-pack: center;
}

box-pack属性总共有4个值：

.box{
   box-pack: start | end | center | justify;
   /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/
}

各个值的含义以下：
start: 
   对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是全部剩余的空间)
   对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是全部剩余的空间）
end:
  对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是全部剩余的空间）。
  对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是全部剩余的空间）。
center:
   均等地分割多余空间，其中一半空间被置于首个子元素前，另外一半被置于最后一个子元素后.
justify:
   在每一个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

2.box-align 属性(垂直方向上的对齐方式)
box-align定义子元素交叉轴对齐方式。

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

box-align属性总共有5个值：

.box{
    box-align: start | end | center | baseline | stretch;    /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/}

各个值的含义以下：
start:
   对于正常方向的框，每一个子元素的上边缘沿着框的顶边放置。
   对于反方向的框，每一个子元素的下边缘沿着框的底边放置。
end:
   对于正常方向的框，每一个子元素的下边缘沿着框的底边放置。
   对于反方向的框，每一个子元素的上边缘沿着框的顶边放置。
center:
    均等地分割多余的空间，一半位于子元素之上，另外一半位于子元素之下。
baseline:
    若是 box-orient 是inline-axis或horizontal，全部子元素均与其基线对齐。
stretch:
   拉伸子元素以填充包含块

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

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

box-direction属性总共有3个值：

.box{
    box-direction: normal | reverse | inherit;    /*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/}

4.box-orient 属性

box-orient定义子元素是否应水平或垂直排列。

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

box-orient属性总共有5个值：

.box{
    box-orient: horizontal | vertical | inline-axis | block-axis | inherit;    /*排列方向：水平 | 垂直 | 行内方式排列（默认） | 块方式排列 | 继承父级的box-orient*/}

horizontal: 在水平行中从左向右排列子元素。
vertical: 从上向下垂直排列子元素。
inline-axis： 沿着行内轴来排列子元素（映射为 horizontal）。
block-axis： 沿着块轴来排列子元素（映射为 vertical）。
inherit： 应该从父元素继承 box-orient 属性的值。

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

.box{
    -moz-box-lines: multiple; /*Firefox*/
    -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
    box-lines: multiple;
}

box-lines属性总共有2个值：

.box{
    box-lines: single | multiple;    /*容许换行：不容许（默认） | 容许*/}

single：伸缩盒对象的子元素只在一行内显示
multiple：伸缩盒对象的子元素超出父元素的空间时换行显示

6.box-flex 属性。
box-flex定义是否容许当前子元素伸缩。

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

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

.item{
    box-flex: <value>;    /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/}

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

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

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

.item{
    box-ordinal-group: <integer>;    /*显示次序：<一个整数，默认为1，数值越小越排前>*/}

新版语法以下：

定义容器的display属性：

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}/*行内flex*/.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

容器样式

.box{
    flex-direction: row | row-reverse | column | column-reverse;    /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/
    
    flex-wrap: nowrap | wrap | wrap-reverse;    /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/

    flex-flow: <flex-direction>  <flex-wrap>;    /*主轴方向和换行简写*/

    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;    /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/}

 

flex-direction值介绍以下：
    row: 默认值。灵活的项目将水平显示，正如一个行同样。
    row-reverse: 与 row 相同，可是以相反的顺序。
    column: 灵活的项目将垂直显示，正如一个列同样。
    column-reverse: 与 column 相同，可是以相反的顺序。

flex-wrap 值介绍以下:
    nowrap: flex容器为单行。该状况下flex子项可能会溢出容器。
    wrap: flex容器为多行。该状况下flex子项溢出的部分会被放置到新行，子项内部会发生断行。
     wrap-reverse： 换行并第一行在下方

flex-flow值介绍以下(主轴方向和换行简写)：
    <flex-direction>: 定义弹性盒子元素的排列方向
    <flex-wrap>：控制flex容器是单行或者多行。

justify-content值介绍以下：
    flex-start: 弹性盒子元素将向行起始位置对齐。
    flex-end: 弹性盒子元素将向行结束位置对齐。
    center: 弹性盒子元素将向行中间位置对齐。
    space-between: 第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，
而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around: 伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其余空白空间的一半。

align-items值介绍以下:
   flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
   flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
   center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（若是该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它状况下，该值将参与基线对齐。
   stretch: 若是指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽量接近所在行的尺寸，但同时会遵守'min/max-width/height'属性的限制。

align-content值介绍以下:
    flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（若是该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    space-between: 第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，
剩余的行则按必定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
   space-around: 各行会按必定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其余空间的一半。
   stretch: 各行将会伸展以占用剩余的空间。若是剩余的空间是负数，该值等效于'flex-start'。在其它状况下，剩余空间被全部行平分，以扩大它们的侧轴尺寸。

子元素属性

.item{
    order: <integer>;    /*排序：数值越小，越排前，默认为0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即若是有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（若是空间不足则会缩小，值为0不缩小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为0，能够设置px值，也能够设置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/}

兼容写法

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

.box{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */}

这里还要注意的是，若是子元素是行内元素，在不少状况下都要使用 display:block 或 display:inline-block 
把行内子元素变成块元素（例如使用 box-flex 属性），这也是旧版语法和新版语法的区别之一。

2. 子元素主轴对齐方式（水平居中对齐）

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

兼容写法新版语法的 space-around 是不可用的：以下新版语法space-around;

.box{
    box-pack: start | end | center | justify;    /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/

    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/}

3. 子元素交叉轴对齐方式（垂直居中对齐）

.box{
    box-align: start | end | center | baseline | stretch;    /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/

    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/}

4. 子元素的显示方向。

子元素的显示方向可经过 box-direction + box-orient + flex-direction 实现，以下代码：
1. 左到右(水平方向)

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

2. 右到左(水平方向)

.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 来改变对齐方式。

3. 上到下(垂直方向上)

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

4. 下到上（垂直方向上）

.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;
}

5. 是否容许子元素伸缩

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

box语法中 box-flex 若是不是0就表示该子元素容许伸缩，而flex是分开的，上面 flex-grow 是容许放大（默认不容许）

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

flex-shrink 是容许缩小（默认容许）。box-flex 默认值为0，也就是说，在默认的状况下，在两个浏览器中的表现是不同的：
介绍以下：

.item{
    box-flex: <value>;    /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即若是有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（若是空间不足则会缩小，值为0不缩小）*/}

6. 子元素的显示次序

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