flex弹性盒布局兼容性写法/* flex弹性盒布局兼容性写法样式⽂件
* 常⽤类
* display__flex
* flex_direction__column
* flex_wrap__wrap
* justify_content__center
* justify_content__space_between
* justify_content__space_around
* align_items__center
* flex_grow__1
* flex_shrink__0
*/
/*
设置在弹性容器上的属性
*/
.display__flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/*flex-direction属性决定主轴的⽅向（即项⽬的排列⽅向）。*/
.flex_direction__row_reverse {
-
webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex_direction__column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.
flex_direction__column_reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/*默认情况下，项⽬都排在⼀条线（⼜称"轴线"）上。flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏。*/
.flex_wrap__nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex_wrap__wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex_wrap__wrap_reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
/*justify-content属性定义了项⽬在主轴上的对齐⽅式。*/
.justify_content__flex_start {
-webkit-box-pack: start;
-
ms-flex-pack: start;
justify-content: flex-start;
}
.justify_content__flex_end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify_content__center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify_content__space_between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify_content__space_around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
/
*align-items属性定义项⽬在交叉轴上如何对齐。*/
.align_items__flex_start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align_items__flex_end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.
align_items__center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align_items__baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
/*align-content属性定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤。*/
.flex布局对齐方式
align_content__flex_start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.align_content__flex_end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.align_content__center {
-ms-flex-line-pack: center;
align-content: center;
}
.align_content__space_between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.align_content__space_around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
/*
设置在弹性项⽬上的属性
*/
/*order属性定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为0。以下是兼容样式写法⽰例，可根据需要修改属性值。*/
.order__1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
/*flex-grow属性定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。以下是兼容样式写法⽰例，可根据需要修改属性值。*/ .flex_grow__1 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。