/* 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: -webket-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属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。*/ .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; } /*flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。以下是兼容样式写法示例,可根据需要修改属性值。*/ .flex_shrink__0 { -ms-flex-negative: 0; flex-shrink: 0; } /* flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 以下是兼容样式写法示例,可根据需要修改属性值。 */ .flex_basis__100px { -ms-flex-preferred-size: 100px; flex-basis: 100px; } /*align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。*/ .align_self__flex_start { -ms-flex-item-align: start; align-self: flex-start; } .align_self__flex_end { -ms-flex-item-align: end; align-self: flex-end; } .align_self__center { -ms-flex-item-align: center; align-self: center; } .align_self__baseline { -ms-flex-item-align: baseline; align-self: baseline; }