base-flex/dist/base.css

重置浏览器默认的一些样式，包含 flexbox 布局，使用 scss 语法编写

@charset 'UTF-8';
/*!
 * base-flex.scss
 *
 * @vaersion 2.4.2
 * @author 欧鹏程 vxhly <pengchengou@gmail.com>
 *
 * 参考地址：
 * 语法：scss
 *
 * @description 重置浏览器默认的一些样式，包含 flexbox 布局
 */
/**
 * [清除内外边距]
 */
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

/**
 * [重置 HTML5 元素]
 */
article,
aside,
audio,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
mark,
menu,
nav,
section,
summary,
time,
video {
  display: block;
  margin: 0;
  padding: 0;
}

/**
 * [隐藏属性]
 */
[hidden],
script,
template {
  display: none;
}

/**
 * [重置 H5 画板]
 */
canvas {
  display: inline-block;
}

/**
 * [重置 summary]
 */
summary {
  display: list-item;
}

/**
 * [重置 img 样式]
 */
img {
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
  border: 0;
}

/**
 * [设置高度，超出自动隐藏]
 */
body,
html {
  overflow: hidden;
  min-height: 100%;
}

/**
 * [重置 H5 元素的边距]
 */
address,
blockquote,
dl,
fieldset,
figure,
hr,
ol,
p,
pre,
ul {
  margin: 0 0 1rem;
}

/**
 * [重置行内元素]
 */
a,
b,
big,
code,
font,
i,
img,
q,
span,
time {
  display: inline-block;
  margin: .3rem 0;
}

/**
 * [清除点击效果]
 */
*:focus {
  outline: none;
}

/**
 * [使盒子模型成为 border-box，在改变 margin 或者 padding 时不改变宽高]
 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * [重置 hr 样式]
 */
hr {
  overflow: visible;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * [重置 img 样式]
 */
img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * [重置字体样式]
 */
html {
  font-size: 100%;
  overflow-y: auto;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/**
 * [重置超链接样式及超链接各个伪类的样式]
 */
a {
  color: #12c2e9;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
    /**
     * [鼠标指针浮动的链接]
     */
  text-decoration: underline;
  color: #317023;
}

a:visited {
    /**
     * [已被访问的链接]
     */
  text-decoration: none;
  color: #12c2e9;
}

a:focus {
    /**
     * [选取获得焦点的链接]
     */
  outline: thin dotted;
  outline: 1px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:active,
a:hover {
    /**
     * [清楚点击边框]
     */
  outline-width: 0;
}

/**
 * [重置上标的对齐方式]
 */
sup {
  vertical-align: text-top;
}

/**
 * [重置下标的对齐方式]
 */
sub {
  vertical-align: text-bottom;
}

/**
 * [移除底边框， 使更多浏览器支持 text-decoration]
 */
abbr[title] {
  text-decoration: underline dotted;
  border-bottom: 1px dotted;
  -webkit-text-decoration: underline dotted;
  -moz-text-decoration: underline dotted;
}

/**
 * [文本被选中时的样式]
 */
::-moz-selection,
::-moz-selection {
  color: #fff;
  background: #12c2e9;
  text-shadow: none;
}

::-moz-selection,
::selection {
  color: #fff;
  background: #12c2e9;
  text-shadow: none;
}

/**
 * [移除 text-decoration]
 */
a,
ins {
  text-decoration: none;
}

/**
 * [重置背景色]
 */
ins,
mark {
  color: #333;
  background: #ffa;
}

/**
 * [重置鼠标样式]
 */
abbr[title],
dfn[title] {
  cursor: help;
}

/**
 * [重置样式]
 */
dfn[title] {
  font-style: normal;
  border-bottom: 1px dotted;
}

/**
 * [设置默认字号，定义高亮]
 */
html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/**
 * [重置字体样式]
 */
body {
  font-family: 'Segoe UI','Lucida Grande',Helvetica,Arial,'Microsoft YaHei',FreeSans,Arimo,'Droid Sans','wenquanyi micro hei','Hiragino Sans GB','Hiragino Sans GB W3',FontAwesome,sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

/**
 * [重置标题字体样式]
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0 0 1rem;
}

/**
 * [重置 Html5 字体样式]
 */
address,
cite,
dfn,
em,
var {
  font-style: normal italic;
}

/**
 * [将斜体扶正]
 */
code,
kbd,
pre,
samp {
  font-family: Monaco, Menlo, Consolas, 'Courier New', 'FontAwesome', monospace;
  font-size: 1em;
}

/**
 * [统一等宽字体]
 */
small {
  font-size: 80%;
}

/**
 * [重置代码专用标签样式]
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * [重置 mark 背景色]
 */
mark {
  color: #000;
  background: #ff0;
}

/**
 * [重置粗体样式]
 */
b,
strong {
  font-weight: inherit;
}

/**
 * 重置上标和下标
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
}

/**
 * 提高所有浏览器中预格式化文本的可读性
 */
pre {
  white-space: pre-wrap;
}

/**
 * 设置一致的 quote 类型
 */
q {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

i {
  font-size: 1.3rem;
}

/**
 * [清除列表默认样式]
 */
ol,
ul {
  list-style: none;
}

/**
 * [重置颜色]
 */
legend {
  color: #000;
}

/**
 * [让链接里的 img 无边框]
 */
fieldset,
img {
  border: 0;
}

/**
 * [重置字体]
 */
button,
input,
select,
textarea {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'liga', 'kern';
}

/**
 * [在所有浏览器中改变边框、边距]
 */
fieldset {
  margin: 0 2px;
  padding: .35em .625em .75em;
  border: 1px solid #c0c0c0;
}

/**
 * [使得表单元素在 ie 下能继承字体大小]
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

/**
 * [重置按钮隐藏方式]
 */
button,
input {
  line-height: normal;
  *overflow: visible;
}

/**
 * [删除文本变换的继承]
 */
button,
select {
  text-transform: none;
}

/**
 * [设置按钮类型]
 */
[type='reset'],
[type='submit'],
button,
html [type='button'] {
  cursor: pointer;
  -webkit-appearance: button;
}

/**
 * [清除边框]
 */
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**
 * [重置样式]
 */
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * [重置搜索框]
 */
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * [重置数字框]
 */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * [重置多选框和单选框]
 */
[type='checkbox'],
[type='radio'] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

/**
 * [重置样式]
 */
legend {
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  color: inherit;
}

/**
 * [重置样式]
 */
progress {
  display: inline-block;
  vertical-align: baseline;
}

/**
 * [隐藏方式]
 */
textarea {
  overflow: auto;
}

/**
 * [重置上传按钮]
 */
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

/**
 * [清除边框]
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/**
 * [设置鼠标样式]
 */
label {
  cursor: pointer;
}

/**
 * [清除行高]
 */
button,
input {
  line-height: normal;
}

/**
 * [清除 text-transform]
 */
button,
select {
  text-transform: none;
}

/**
 * [重置表格元素的样式]
 */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

table td {
  vertical-align: top;
}

table button,
table input {
  *overflow: auto;
}

/**
 * [重置 H5 视频标签]
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

/**
 * [当没有 controls 时的样式]
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * [设置其根元素隐藏]
 */
svg:not(:root) {
  overflow: hidden;
}

/** 屏幕(screen)和打印(print)的样式表 **/
@media print {
  * {
    color: black !important;
    color: #000 !important;
    background: transparent !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }

  *::after,
    *::before {
    color: #000 !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a {
    text-decoration: underline;
  }

  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
  }

  a[href^='#']::after,
    a[href^='javascript:']::after {
    content: '';
  }

  abbr[title]::after {
    content: ' (' attr(title) ')';
  }

  blockquote,
    pre {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  img,
    tr {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  h2,
    h3,
    p {
    orphans: 3;
    widows: 3;
  }

  h2,
    h3 {
    page-break-after: avoid;
  }
}

/**
 * [当窗口发生改变时的样式]
 */
@media only screen and (max-width: 640px) {
  body {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -ms-hyphens: auto;
  }
}

/*!
 * scss-flex.scss
 *
 * @vaersion 1.5.0
 * @author 欧鹏程 vxhly <pengchengou@gmail.com>
 *
 * 参考地址：https://github.com/lzxb/flex.css
 * 语法：scss
 *
 * @description：flexbox 布局模式是一种新的 CSS3，是专为现代网络更复杂的需求
 */
/**
  * [定义 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;
}

/**
  * [主轴方向：从左到右(默认)]
  */
[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'] {
  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'] {
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
}

/**
  * [主轴方向：从下到上]
  */
[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'] {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

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

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

/**
  * [布局方式：从左到右且不换行(默认)]
  */
[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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

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

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

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

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

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

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

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

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

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

/**
  * [主轴交叉轴对齐方式：居中]
  */
[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'] {
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

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

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

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

/**
  * [多根轴线的对齐方式：与交叉轴两端对齐，轴线之间的间隔平均分布]
  */
[flex~='content:between'] {
  -webkit-align-content: between;
  -ms-flex-line-pack: between;
  align-content: between;
}

/**
  * [多根轴线的对齐方式：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍]
  */
[flex~='content:around'] {
  -webkit-align-content: around;
  -ms-flex-line-pack: around;
  align-content: around;
}

/**
  * [子元素平分宽度]
  */
[flex~='box:first'] > *,
[flex~='box:justify'] > *,
[flex~='box:last'] > *,
[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,
[flex~='box:last'] > :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~='box:justify'] > :first-child,
[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:first'] > *,
[flex~='dir:top'][flex~='box:justify'] > *,
[flex~='dir:top'][flex~='box:last'] > *,
[flex~='dir:top'][flex~='box:mean'] > * {
  width: auto;
  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~='dir:bottom'][flex~='box:first'] > *,
[flex~='dir:bottom'][flex~='box:justify'] > *,
[flex~='dir:bottom'][flex~='box:last'] > *,
[flex~='dir:bottom'][flex~='box:mean'] > * {
  width: auto;
  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~='dir:top'][flex~='box:first'] > :first-child,
[flex~='dir:top'][flex~='box:last'] > :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~='dir:top'][flex~='box:justify'] > :first-child,
[flex~='dir:top'][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~='dir:bottom'][flex~='box:first'] > :first-child,
[flex~='dir:bottom'][flex~='box:justify'] > :first-child [flex~='dir:bottom'][flex~='box:justify'] > :last-child,
[flex~='dir:bottom'][flex~='box:last'] > :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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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'] {
  -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;
}