史上最全flex兼容写法整理

flex 设置为flex

inline-flex 行内flex

flex-row 主轴横向排列

flex-column 主轴纵向排列

属性定义了项目在主轴上的对齐方式

justify-content-center 设置主轴居中

justify-content-end 设置主轴对齐底部

justify-content-space-between 设置主轴元素均分且紧贴两边

justify-content-space-around 设置主轴元素均分

属性定义项目在交叉轴上如何对齐

align-items-start 设置侧轴起点对齐

align-items-end 设置侧轴对齐底部

align-items-center 设置侧轴居中对齐

align-items-baseline 设置项目的第一行文字的基线对齐

多根轴线的对齐方式

align-content-start 与交叉轴的起点对齐

align-content-end 与交叉轴的终点对齐

align-content-center 与交叉轴的中点对齐

align-content-between 与交叉轴两端对齐，轴线之间的间隔平均分布

align-content-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

align-content-stretch （默认值）：轴线占满整个交叉轴

定义，如果一条轴线排不下，如何换行。

flex-wrap-nowrap 不换行

flex-wrap-wrap 换行，第一行在上方。

flex-wrap-reverse 换行，第一行在下方。

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flex-row {
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.justify-content-space-around {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
.flex-wrap-nowrap {
    -webkit-box-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap-wrap {
    -webkit-box-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap-reverse {
    -webkit-box-wrap: reverse;
    -ms-flex-wrap: reverse;
    -webkit-flex-wrap: reverse;
    flex-wrap: reverse;
}
.align-content-start {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    -webkit-align-conten: flex-start;
    align-content: flex-start;
}
.align-content-end {
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    -webkit-align-conten: flex-end;
    align-content: flex-end;
}
.align-content-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-conten: center;
    align-content: center;
}
.align-content-between {
    -webkit-box-align: space-between;
    -ms-flex-align: space-between;
    -webkit-align-conten: space-between;
    align-content: space-between;
}
.align-content-around {
    -webkit-box-align: space-around;
    -ms-flex-align: space-around;
    -webkit-align-conten: space-around;
    align-content: space-around;
}
.align-content-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-conten: stretch;
    align-content: stretch;
}

写在设置为flex的子元素上的6个值 （需要改具体参数值） 注意是子元素

1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item{
	-prefix-box-ordinal-group: 1;
	-webkit-box-ordinal-group: 2;   
	-moz-box-ordinal-group: 2;     
	-ms-flex-order: 2;             
	-webkit-order: 2;               
	order: 2; 
}

2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item{ 
	-moz-flex-flex-grow: 2;       
	-ms-flex-flex-grow: 2;             
	-webkit-flex-grow: 2;               
	flex-grow: 2;
}

3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item{
	-moz-flex-shrink: 2;       
	-ms-flex-shrink: 2;             
	-webkit-flex-shrink: 2;               
	flex-shrink:: 2;
}

4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item{
	-moz-flex-basis: 2;       
	-ms-flex-basis: 2;             
	-webkit-flex-basis: 2;               
	flex-basis:: 2;
}

5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{
	-moz-flex: 2;       
	-ms-flex: 2;             
	-webkit-flex: 2;               
	flex:: 2;
}

6. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}