scss-flex/dist/scss-flex.css

flexbox，移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器

/*!
 * scss-flex - flexbox，移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器
 * 
 * @version v1.8.2
 * 
 * @author vxhly <pengchengou@gmail.com>
 * 
 * @link https://github.com/vxhly/scss-flex#readme
 * @license MIT
 */
@charset 'UTF-8';
/*
 * 清楚浏览器默认样式
 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #000;
  background-color: #fff;
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/*
 * 开启 flexbox 布局
 */
/**
  * [定义 flex 布局]
  */
[flex] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[flex] > * {
  display: block;
}

[flex] > [flex] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[inline-flex] {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

[inline-flex] > * {
  display: block;
}

[inline-flex] > [flex] {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * 定义主轴 / 交叉轴方向
 */
/**
  * [主轴方向：从左到右(默认)]
  */
[flex~='dir:left'],
[inline-flex~='dir:left'] {
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}

/**
  * [主轴方向：从右到左)]
  */
[flex~='dir:right'],
[inline-flex~='dir:right'] {
  flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
}

/**
  * [主轴方向：从上到下]
  */
[flex~='dir:top'],
[inline-flex~='dir:top'] {
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
}

/**
  * [主轴方向：从下到上]
  */
[flex~='dir:bottom'],
[inline-flex~='dir:bottom'] {
  flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
}

/**
  * [换行方式：不换行(默认)]
  */
[flex~='wrap:nowrap'],
[inline-flex~='wrap:nowrap'] {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/**
  * [换行方式：换行，第一行在上方]
  */
[flex~='wrap:wrap'],
[inline-flex~='wrap:wrap'] {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/**
  * [换行方式：换行，第一行在下方]
  */
[flex~='wrap:reverse'],
[inline-flex~='wrap:reverse'] {
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

/**
  * [布局方式：从左到右且不换行(默认)]
  */
[flex~='flow:left-nowrap'],
[inline-flex~='flow:left-nowrap'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

/**
  * [布局方式：从左到右且换行，第一行在上方]
  */
[flex~='flow:left-wrap'],
[inline-flex~='flow:left-wrap'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

/**
  * [布局方式：从左到右且换行，第一行在下方]
  */
[flex~='flow:left-reverse'],
[inline-flex~='flow:left-reverse'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap-reverse;
  -ms-flex-flow: row wrap-reverse;
  flex-flow: row wrap-reverse;
}

/**
  * [布局方式：从右到左且不换行]
  */
[flex~='flow:right-nowrap'],
[inline-flex~='flow:right-nowrap'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: row-reverse nowrap;
  -ms-flex-flow: row-reverse nowrap;
  flex-flow: row-reverse nowrap;
}

/**
  * [布局方式：从右到左且换行，第一行在上方]
  */
[flex~='flow:right-wrap'],
[inline-flex~='flow:right-wrap'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: row-reverse wrap;
  -ms-flex-flow: row-reverse wrap;
  flex-flow: row-reverse wrap;
}

/**
  * [布局方式：从右到左且换行，第一行在下方]
  */
[flex~='flow:right-reverse'],
[inline-flex~='flow:right-reverse'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: row-reverse wrap-reverse;
  -ms-flex-flow: row-reverse wrap-reverse;
  flex-flow: row-reverse wrap-reverse;
}

/**
  * [布局方式：从上到下且不换行]
  */
[flex~='flow:top-nowrap'],
[inline-flex~='flow:top-nowrap'] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

/**
  * [布局方式：从上到下且换行，第一行在上方]
  */
[flex~='flow:top-wrap'],
[inline-flex~='flow:top-wrap'] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
}

/**
  * [布局方式：从上到下且换行，第一行在下方]
  */
[flex~='flow:top-reverse'],
[inline-flex~='flow:top-reverse'] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column wrap-reverse;
  -ms-flex-flow: column wrap-reverse;
  flex-flow: column wrap-reverse;
}

/**
  * [布局方式：从下到上且不换行]
  */
[flex~='flow:bottom-nowrap'],
[inline-flex~='flow:bottom-nowrap'] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: column-reverse nowrap;
  -ms-flex-flow: column-reverse nowrap;
  flex-flow: column-reverse nowrap;
}

/**
  * [布局方式：从下到上且换行，第一行在上方]
  */
[flex~='flow:bottom-wrap'],
[inline-flex~='flow:bottom-wrap'] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: column-reverse wrap;
  -ms-flex-flow: column-reverse wrap;
  flex-flow: column-reverse wrap;
}

/**
  * [布局方式：从下到上且换行，第一行在下方]
  */
[flex~='flow:bottom-reverse'],
[inline-flex~='flow:bottom-reverse'] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: column-reverse wrap-reverse;
  -ms-flex-flow: column-reverse wrap-reverse;
  flex-flow: column-reverse wrap-reverse;
}

/*
 * 定义项目在主轴 / 交叉轴上的排列方式
 */
/**
  * [主轴对齐方式：从左到右(默认)]
  */
[flex~='main:left'],
[inline-flex~='main:left'] {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/**
  * [主轴对齐方式：从右到左]
  */
[flex~='main:right'],
[inline-flex~='main:right'] {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/**
  * [主轴对齐方式：两端对齐]
  */
[flex~='main:between'],
[inline-flex~='main:between'] {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/**
  * [主轴对齐方式：分散对齐]
  */
[flex~='main:around'],
[inline-flex~='main:around'] {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

/**
  * [主轴对齐方式：居中对齐]
  */
[flex~='main:center'],
[inline-flex~='main:center'] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/**
  * [主轴交叉轴对齐方式：居中]
  */
[flex~='main-cross:center'],
[inline-flex~='main-cross:center'] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/**
  * [交叉轴对齐方式：从上到下(默认)]
  */
[flex~='cross:top'],
[inline-flex~='cross:top'] {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/**
  * [交叉轴对齐方式：从下到上]
  */
[flex~='cross:bottom'],
[inline-flex~='cross:bottom'] {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

/**
  * [交叉轴对齐方式：居中对齐]
  */
[flex~='cross:center'],
[inline-flex~='cross:center'] {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/**
  * [交叉轴对齐方式：跟随内容高度对齐]
  */
[flex~='cross:baseline'],
[inline-flex~='cross:baseline'] {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

/**
  * [交叉轴对齐方式：高度并排铺满]
  */
[flex~='cross:stretch'],
[inline-flex~='cross:stretch'] {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

/**
  * [主轴交叉轴对齐方式：居中]
  */
[flex~='main-cross:center'],
[inline-flex~='main-cross:center'] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/**
  * [多根轴线的对齐方式：轴线占满整个交叉轴(默认)]
  */
[flex~='content:stretch'],
[inline-flex~='content:stretch'] {
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

/**
  * [多根轴线的对齐方式：与交叉轴的起点对齐]
  */
[flex~='content:start'],
[inline-flex~='content:start'] {
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

/**
  * [多根轴线的对齐方式：与交叉轴的终点对齐]
  */
[flex~='content:end'],
[inline-flex~='content:end'] {
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

/**
  * [多根轴线的对齐方式：与交叉轴的中点对齐]
  */
[flex~='content:center'],
[inline-flex~='content:center'] {
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

/**
  * [所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。]
  */
[flex~='content:between'],
[inline-flex~='content:between'] {
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

/**
  * [所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。]
  */
[flex~='content:around'],
[inline-flex~='content:around'] {
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

/**
  * [均匀分配容器,容器周围的空间相等]
  */
[flex~='content:evenly'],
[inline-flex~='content:evenly'] {
  -webkit-align-content: space-evenly;
  -ms-flex-line-pack: space-evenly;
  align-content: space-evenly;
}

/*
 * 允许项目进行平分空间
 */
/**
  * [子元素平分宽度]
  */
[flex~='box:first'] > *,
[inline-flex~='box:first'] > *,
[flex~='box:justify'] > *,
[inline-flex~='box:justify'] > *,
[flex~='box:last'] > *,
[inline-flex~='box:last'] > *,
[flex~='box:mean'] > *,
[inline-flex~='box:mean'] > * {
  width: 0;
  height: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

[flex~='box:first'] > *:first-child,
[inline-flex~='box:first'] > *:first-child,
[flex~='box:last'] > *:last-child,
[inline-flex~='box:last'] > *:last-child,
[flex~='box:justify'] > *:first-child,
[inline-flex~='box:justify'] > *:first-child,
[flex~='box:justify'] > *:last-child,
[inline-flex~='box:justify'] > *:last-child {
  width: auto;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/**
  * [子元素平分高度]
  */
[flex~='dir:top'][flex~='box:mean'] > *,
[inline-flex~='dir:top'][inline-flex~='box:mean'] > *,
[flex~='dir:top'][flex~='box:first'] > *,
[inline-flex~='dir:top'][inline-flex~='box:first'] > *,
[flex~='dir:top'][flex~='box:last'] > *,
[inline-flex~='dir:top'][inline-flex~='box:justify'] > *,
[flex~='dir:bottom'][flex~='box:mean'] > *,
[inline-flex~='dir:bottom'][inline-flex~='box:mean'] > *,
[flex~='dir:bottom'][flex~='box:first'] > *,
[inline-flex~='dir:bottom'][inline-flex~='box:first'] > *,
[flex~='dir:bottom'][flex~='box:last'] > *,
[inline-flex~='dir:bottom'][inline-flex~='box:last'] > *,
[flex~='dir:bottom'][flex~='box:justify'] > *,
[inline-flex~='dir:bottom'][inline-flex~='box:justify'] > * {
  width: auto;
  height: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

[flex~='dir:top'][flex~='box:first'] > *:first-child,
[inline-flex~='dir:top'][inline-flex~='box:first'] > *:first-child,
[flex~='dir:top'][flex~='box:last'] > *:last-child,
[inline-flex~='dir:top'][inline-flex~='box:last'] > *:last-child,
[flex~='dir:top'][flex~='box:justify'] > *:first-child,
[inline-flex~='dir:top'][inline-flex~='box:justify'] > *:first-child,
[flex~='dir:top'][flex~='box:justify'] > *:last-child,
[inline-flex~='dir:top'][inline-flex~='box:justify'] > *:last-child,
[flex~='dir:bottom'][flex~='box:first'] > *:first-child,
[inline-flex~='dir:bottom'][inline-flex~='box:first'] > *:first-child,
[flex~='dir:bottom'][flex~='box:last'] > *:last-child,
[inline-flex~='dir:bottom'][inline-flex~='box:last'] > *:last-child,
[flex~='dir:bottom'][flex~='box:justify'] > *:first-child,
[inline-flex~='dir:bottom'][inline-flex~='box:justify'] > *:first-child,
[flex~='dir:bottom'][flex~='box:justify'] > *:last-child,
[inline-flex~='dir:bottom'][inline-flex~='box:justify'] > *:last-child {
  height: auto;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/**
  * [自定义项目的放大或者缩小比例]
  */
[flex-box='0'],
[inline-flex-box='0'] {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

[flex-box='1'],
[inline-flex-box='1'] {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

[flex-box='2'],
[inline-flex-box='2'] {
  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  -webkit-flex-shrink: 2;
  -ms-flex-negative: 2;
  flex-shrink: 2;
}

[flex-box='3'],
[inline-flex-box='3'] {
  -webkit-box-flex: 3;
  -webkit-flex-grow: 3;
  -ms-flex-positive: 3;
  flex-grow: 3;
  -webkit-flex-shrink: 3;
  -ms-flex-negative: 3;
  flex-shrink: 3;
}

[flex-box='4'],
[inline-flex-box='4'] {
  -webkit-box-flex: 4;
  -webkit-flex-grow: 4;
  -ms-flex-positive: 4;
  flex-grow: 4;
  -webkit-flex-shrink: 4;
  -ms-flex-negative: 4;
  flex-shrink: 4;
}

[flex-box='5'],
[inline-flex-box='5'] {
  -webkit-box-flex: 5;
  -webkit-flex-grow: 5;
  -ms-flex-positive: 5;
  flex-grow: 5;
  -webkit-flex-shrink: 5;
  -ms-flex-negative: 5;
  flex-shrink: 5;
}

[flex-box='6'],
[inline-flex-box='6'] {
  -webkit-box-flex: 6;
  -webkit-flex-grow: 6;
  -ms-flex-positive: 6;
  flex-grow: 6;
  -webkit-flex-shrink: 6;
  -ms-flex-negative: 6;
  flex-shrink: 6;
}

[flex-box='7'],
[inline-flex-box='7'] {
  -webkit-box-flex: 7;
  -webkit-flex-grow: 7;
  -ms-flex-positive: 7;
  flex-grow: 7;
  -webkit-flex-shrink: 7;
  -ms-flex-negative: 7;
  flex-shrink: 7;
}

[flex-box='8'],
[inline-flex-box='8'] {
  -webkit-box-flex: 8;
  -webkit-flex-grow: 8;
  -ms-flex-positive: 8;
  flex-grow: 8;
  -webkit-flex-shrink: 8;
  -ms-flex-negative: 8;
  flex-shrink: 8;
}

[flex-box='9'],
[inline-flex-box='9'] {
  -webkit-box-flex: 9;
  -webkit-flex-grow: 9;
  -ms-flex-positive: 9;
  flex-grow: 9;
  -webkit-flex-shrink: 9;
  -ms-flex-negative: 9;
  flex-shrink: 9;
}

[flex-box='10'],
[inline-flex-box='10'] {
  -webkit-box-flex: 10;
  -webkit-flex-grow: 10;
  -ms-flex-positive: 10;
  flex-grow: 10;
  -webkit-flex-shrink: 10;
  -ms-flex-negative: 10;
  flex-shrink: 10;
}

/*
 * 允许项目进行排列
 */
/**
  * [允许项目进行排列]
  */
[order='0'] {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}

[order='1'] {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

[order='2'] {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

[order='3'] {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

[order='4'] {
  -webkit-box-ordinal-group: 5;
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}

[order='5'] {
  -webkit-box-ordinal-group: 6;
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}

[order='6'] {
  -webkit-box-ordinal-group: 7;
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}

[order='7'] {
  -webkit-box-ordinal-group: 8;
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}

[order='8'] {
  -webkit-box-ordinal-group: 9;
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}

[order='9'] {
  -webkit-box-ordinal-group: 10;
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}

[order='10'] {
  -webkit-box-ordinal-group: 11;
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}

[order='11'] {
  -webkit-box-ordinal-group: 12;
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}

[order='12'] {
  -webkit-box-ordinal-group: 13;
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}

[order='-1'] {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

[order='-2'] {
  -webkit-box-ordinal-group: -1;
  -webkit-order: -2;
  -ms-flex-order: -2;
  order: -2;
}

[order='-3'] {
  -webkit-box-ordinal-group: -2;
  -webkit-order: -3;
  -ms-flex-order: -3;
  order: -3;
}

[order='-4'] {
  -webkit-box-ordinal-group: -3;
  -webkit-order: -4;
  -ms-flex-order: -4;
  order: -4;
}

[order='-5'] {
  -webkit-box-ordinal-group: -4;
  -webkit-order: -5;
  -ms-flex-order: -5;
  order: -5;
}

[order='-6'] {
  -webkit-box-ordinal-group: -5;
  -webkit-order: -6;
  -ms-flex-order: -6;
  order: -6;
}

[order='-7'] {
  -webkit-box-ordinal-group: -6;
  -webkit-order: -7;
  -ms-flex-order: -7;
  order: -7;
}

[order='-8'] {
  -webkit-box-ordinal-group: -7;
  -webkit-order: -8;
  -ms-flex-order: -8;
  order: -8;
}

[order='-9'] {
  -webkit-box-ordinal-group: -8;
  -webkit-order: -9;
  -ms-flex-order: -9;
  order: -9;
}

[order='-10'] {
  -webkit-box-ordinal-group: -9;
  -webkit-order: -10;
  -ms-flex-order: -10;
  order: -10;
}

[order='-11'] {
  -webkit-box-ordinal-group: -10;
  -webkit-order: -11;
  -ms-flex-order: -11;
  order: -11;
}

[order='-12'] {
  -webkit-box-ordinal-group: -11;
  -webkit-order: -12;
  -ms-flex-order: -12;
  order: -12;
}

/*
 * 允许单个项目有与其他项目不一样的对齐方式
 */
/**
  * [表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch(默认)]
  */
[flex~='item:auto'],
[inline-flex~='item:auto'] {
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

/**
  * [居于轴顶部对齐]
  */
[flex~='item:start'],
[inline-flex~='item:start'] {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

/**
  * [居于轴尾部对齐]
  */
[flex~='item:end'],
[inline-flex~='item:end'] {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

/**
  * [居于轴中心对齐]
  */
[flex~='item:center'],
[inline-flex~='item:center'] {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

/**
  * [居于基线对齐]
  */
[flex~='item:baseline'],
[inline-flex~='item:baseline'] {
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline;
}

/**
  * [充满整个轴]
  */
[flex~='item:stretch'],
[inline-flex~='item:stretch'] {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

/*# sourceMappingURL=scss-flex.css.map */