scss-flex
Version:
flexbox，移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器
1 lines • 27 kB
Source Map (JSON)
{"version":3,"sources":["scss-flex.css"],"names":[],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"scss-flex.css","sourcesContent":["/*!\n * scss-flex - flexbox，移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器\n * \n * @version v1.8.2\n * \n * @author vxhly <pengchengou@gmail.com>\n * \n * @link https://github.com/vxhly/scss-flex#readme\n * @license MIT\n */\n@charset 'UTF-8';\n/*\n * 清楚浏览器默认样式\n */\n* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: baseline;\n outline: 0;\n -webkit-tap-highlight-color: transparent;\n}\n\nbody {\n font-family: -apple-system, Helvetica, 'Microsoft YaHei', Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: #000;\n background-color: #fff;\n -webkit-text-size-adjust: 100% !important;\n -moz-text-size-adjust: 100% !important;\n -ms-text-size-adjust: 100% !important;\n text-size-adjust: 100% !important;\n}\n\n/*\n * 开启 flexbox 布局\n */\n/**\n * [定义 flex 布局]\n */\n[flex] {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n}\n\n[flex] > * {\n display: block;\n}\n\n[flex] > [flex] {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n}\n\n[inline-flex] {\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n\n[inline-flex] > * {\n display: block;\n}\n\n[inline-flex] > [flex] {\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n\n/*\n * 定义主轴 / 交叉轴方向\n */\n/**\n * [主轴方向：从左到右(默认)]\n */\n[flex~='dir:left'],\n[inline-flex~='dir:left'] {\n flex-direction: row;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n}\n\n/**\n * [主轴方向：从右到左)]\n */\n[flex~='dir:right'],\n[inline-flex~='dir:right'] {\n flex-direction: row-reverse;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -webkit-flex-direction: row-reverse;\n -ms-flex-direction: row-reverse;\n}\n\n/**\n * [主轴方向：从上到下]\n */\n[flex~='dir:top'],\n[inline-flex~='dir:top'] {\n flex-direction: column;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n}\n\n/**\n * [主轴方向：从下到上]\n */\n[flex~='dir:bottom'],\n[inline-flex~='dir:bottom'] {\n flex-direction: column-reverse;\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -webkit-flex-direction: column-reverse;\n -ms-flex-direction: column-reverse;\n}\n\n/**\n * [换行方式：不换行(默认)]\n */\n[flex~='wrap:nowrap'],\n[inline-flex~='wrap:nowrap'] {\n -webkit-flex-wrap: nowrap;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n/**\n * [换行方式：换行，第一行在上方]\n */\n[flex~='wrap:wrap'],\n[inline-flex~='wrap:wrap'] {\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n/**\n * [换行方式：换行，第一行在下方]\n */\n[flex~='wrap:reverse'],\n[inline-flex~='wrap:reverse'] {\n -webkit-flex-wrap: wrap-reverse;\n -ms-flex-wrap: wrap-reverse;\n flex-wrap: wrap-reverse;\n}\n\n/**\n * [布局方式：从左到右且不换行(默认)]\n */\n[flex~='flow:left-nowrap'],\n[inline-flex~='flow:left-nowrap'] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-flow: row nowrap;\n -ms-flex-flow: row nowrap;\n flex-flow: row nowrap;\n}\n\n/**\n * [布局方式：从左到右且换行，第一行在上方]\n */\n[flex~='flow:left-wrap'],\n[inline-flex~='flow:left-wrap'] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-flow: row wrap;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n\n/**\n * [布局方式：从左到右且换行，第一行在下方]\n */\n[flex~='flow:left-reverse'],\n[inline-flex~='flow:left-reverse'] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-flow: row wrap-reverse;\n -ms-flex-flow: row wrap-reverse;\n flex-flow: row wrap-reverse;\n}\n\n/**\n * [布局方式：从右到左且不换行]\n */\n[flex~='flow:right-nowrap'],\n[inline-flex~='flow:right-nowrap'] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -webkit-flex-flow: row-reverse nowrap;\n -ms-flex-flow: row-reverse nowrap;\n flex-flow: row-reverse nowrap;\n}\n\n/**\n * [布局方式：从右到左且换行，第一行在上方]\n */\n[flex~='flow:right-wrap'],\n[inline-flex~='flow:right-wrap'] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -webkit-flex-flow: row-reverse wrap;\n -ms-flex-flow: row-reverse wrap;\n flex-flow: row-reverse wrap;\n}\n\n/**\n * [布局方式：从右到左且换行，第一行在下方]\n */\n[flex~='flow:right-reverse'],\n[inline-flex~='flow:right-reverse'] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -webkit-flex-flow: row-reverse wrap-reverse;\n -ms-flex-flow: row-reverse wrap-reverse;\n flex-flow: row-reverse wrap-reverse;\n}\n\n/**\n * [布局方式：从上到下且不换行]\n */\n[flex~='flow:top-nowrap'],\n[inline-flex~='flow:top-nowrap'] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-flow: column nowrap;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n}\n\n/**\n * [布局方式：从上到下且换行，第一行在上方]\n */\n[flex~='flow:top-wrap'],\n[inline-flex~='flow:top-wrap'] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-flow: column wrap;\n -ms-flex-flow: column wrap;\n flex-flow: column wrap;\n}\n\n/**\n * [布局方式：从上到下且换行，第一行在下方]\n */\n[flex~='flow:top-reverse'],\n[inline-flex~='flow:top-reverse'] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-flow: column wrap-reverse;\n -ms-flex-flow: column wrap-reverse;\n flex-flow: column wrap-reverse;\n}\n\n/**\n * [布局方式：从下到上且不换行]\n */\n[flex~='flow:bottom-nowrap'],\n[inline-flex~='flow:bottom-nowrap'] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -webkit-flex-flow: column-reverse nowrap;\n -ms-flex-flow: column-reverse nowrap;\n flex-flow: column-reverse nowrap;\n}\n\n/**\n * [布局方式：从下到上且换行，第一行在上方]\n */\n[flex~='flow:bottom-wrap'],\n[inline-flex~='flow:bottom-wrap'] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -webkit-flex-flow: column-reverse wrap;\n -ms-flex-flow: column-reverse wrap;\n flex-flow: column-reverse wrap;\n}\n\n/**\n * [布局方式：从下到上且换行，第一行在下方]\n */\n[flex~='flow:bottom-reverse'],\n[inline-flex~='flow:bottom-reverse'] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: reverse;\n -webkit-flex-flow: column-reverse wrap-reverse;\n -ms-flex-flow: column-reverse wrap-reverse;\n flex-flow: column-reverse wrap-reverse;\n}\n\n/*\n * 定义项目在主轴 / 交叉轴上的排列方式\n */\n/**\n * [主轴对齐方式：从左到右(默认)]\n */\n[flex~='main:left'],\n[inline-flex~='main:left'] {\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n/**\n * [主轴对齐方式：从右到左]\n */\n[flex~='main:right'],\n[inline-flex~='main:right'] {\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * [主轴对齐方式：两端对齐]\n */\n[flex~='main:between'],\n[inline-flex~='main:between'] {\n -webkit-box-pack: justify;\n -webkit-justify-content: space-between;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n/**\n * [主轴对齐方式：分散对齐]\n */\n[flex~='main:around'],\n[inline-flex~='main:around'] {\n -webkit-justify-content: space-around;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n\n/**\n * [主轴对齐方式：居中对齐]\n */\n[flex~='main:center'],\n[inline-flex~='main:center'] {\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n/**\n * [主轴交叉轴对齐方式：居中]\n */\n[flex~='main-cross:center'],\n[inline-flex~='main-cross:center'] {\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n/**\n * [交叉轴对齐方式：从上到下(默认)]\n */\n[flex~='cross:top'],\n[inline-flex~='cross:top'] {\n -webkit-box-align: start;\n -webkit-align-items: flex-start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n/**\n * [交叉轴对齐方式：从下到上]\n */\n[flex~='cross:bottom'],\n[inline-flex~='cross:bottom'] {\n -webkit-box-align: end;\n -webkit-align-items: flex-end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n/**\n * [交叉轴对齐方式：居中对齐]\n */\n[flex~='cross:center'],\n[inline-flex~='cross:center'] {\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n/**\n * [交叉轴对齐方式：跟随内容高度对齐]\n */\n[flex~='cross:baseline'],\n[inline-flex~='cross:baseline'] {\n -webkit-box-align: baseline;\n -webkit-align-items: baseline;\n -ms-flex-align: baseline;\n align-items: baseline;\n}\n\n/**\n * [交叉轴对齐方式：高度并排铺满]\n */\n[flex~='cross:stretch'],\n[inline-flex~='cross:stretch'] {\n -webkit-box-align: stretch;\n -webkit-align-items: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n\n/**\n * [主轴交叉轴对齐方式：居中]\n */\n[flex~='main-cross:center'],\n[inline-flex~='main-cross:center'] {\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n/**\n * [多根轴线的对齐方式：轴线占满整个交叉轴(默认)]\n */\n[flex~='content:stretch'],\n[inline-flex~='content:stretch'] {\n -webkit-align-content: stretch;\n -ms-flex-line-pack: stretch;\n align-content: stretch;\n}\n\n/**\n * [多根轴线的对齐方式：与交叉轴的起点对齐]\n */\n[flex~='content:start'],\n[inline-flex~='content:start'] {\n -webkit-align-content: flex-start;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n}\n\n/**\n * [多根轴线的对齐方式：与交叉轴的终点对齐]\n */\n[flex~='content:end'],\n[inline-flex~='content:end'] {\n -webkit-align-content: flex-end;\n -ms-flex-line-pack: end;\n align-content: flex-end;\n}\n\n/**\n * [多根轴线的对齐方式：与交叉轴的中点对齐]\n */\n[flex~='content:center'],\n[inline-flex~='content:center'] {\n -webkit-align-content: center;\n -ms-flex-line-pack: center;\n align-content: center;\n}\n\n/**\n * [所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。]\n */\n[flex~='content:between'],\n[inline-flex~='content:between'] {\n -webkit-align-content: space-between;\n -ms-flex-line-pack: justify;\n align-content: space-between;\n}\n\n/**\n * [所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。]\n */\n[flex~='content:around'],\n[inline-flex~='content:around'] {\n -webkit-align-content: space-around;\n -ms-flex-line-pack: distribute;\n align-content: space-around;\n}\n\n/**\n * [均匀分配容器,容器周围的空间相等]\n */\n[flex~='content:evenly'],\n[inline-flex~='content:evenly'] {\n -webkit-align-content: space-evenly;\n -ms-flex-line-pack: space-evenly;\n align-content: space-evenly;\n}\n\n/*\n * 允许项目进行平分空间\n */\n/**\n * [子元素平分宽度]\n */\n[flex~='box:first'] > *,\n[inline-flex~='box:first'] > *,\n[flex~='box:justify'] > *,\n[inline-flex~='box:justify'] > *,\n[flex~='box:last'] > *,\n[inline-flex~='box:last'] > *,\n[flex~='box:mean'] > *,\n[inline-flex~='box:mean'] > * {\n width: 0;\n height: auto;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-flex-shrink: 1;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n}\n\n[flex~='box:first'] > *:first-child,\n[inline-flex~='box:first'] > *:first-child,\n[flex~='box:last'] > *:last-child,\n[inline-flex~='box:last'] > *:last-child,\n[flex~='box:justify'] > *:first-child,\n[inline-flex~='box:justify'] > *:first-child,\n[flex~='box:justify'] > *:last-child,\n[inline-flex~='box:justify'] > *:last-child {\n width: auto;\n -webkit-box-flex: 0;\n -webkit-flex-grow: 0;\n -ms-flex-positive: 0;\n flex-grow: 0;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n/**\n * [子元素平分高度]\n */\n[flex~='dir:top'][flex~='box:mean'] > *,\n[inline-flex~='dir:top'][inline-flex~='box:mean'] > *,\n[flex~='dir:top'][flex~='box:first'] > *,\n[inline-flex~='dir:top'][inline-flex~='box:first'] > *,\n[flex~='dir:top'][flex~='box:last'] > *,\n[inline-flex~='dir:top'][inline-flex~='box:justify'] > *,\n[flex~='dir:bottom'][flex~='box:mean'] > *,\n[inline-flex~='dir:bottom'][inline-flex~='box:mean'] > *,\n[flex~='dir:bottom'][flex~='box:first'] > *,\n[inline-flex~='dir:bottom'][inline-flex~='box:first'] > *,\n[flex~='dir:bottom'][flex~='box:last'] > *,\n[inline-flex~='dir:bottom'][inline-flex~='box:last'] > *,\n[flex~='dir:bottom'][flex~='box:justify'] > *,\n[inline-flex~='dir:bottom'][inline-flex~='box:justify'] > * {\n width: auto;\n height: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-flex-shrink: 1;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n}\n\n[flex~='dir:top'][flex~='box:first'] > *:first-child,\n[inline-flex~='dir:top'][inline-flex~='box:first'] > *:first-child,\n[flex~='dir:top'][flex~='box:last'] > *:last-child,\n[inline-flex~='dir:top'][inline-flex~='box:last'] > *:last-child,\n[flex~='dir:top'][flex~='box:justify'] > *:first-child,\n[inline-flex~='dir:top'][inline-flex~='box:justify'] > *:first-child,\n[flex~='dir:top'][flex~='box:justify'] > *:last-child,\n[inline-flex~='dir:top'][inline-flex~='box:justify'] > *:last-child,\n[flex~='dir:bottom'][flex~='box:first'] > *:first-child,\n[inline-flex~='dir:bottom'][inline-flex~='box:first'] > *:first-child,\n[flex~='dir:bottom'][flex~='box:last'] > *:last-child,\n[inline-flex~='dir:bottom'][inline-flex~='box:last'] > *:last-child,\n[flex~='dir:bottom'][flex~='box:justify'] > *:first-child,\n[inline-flex~='dir:bottom'][inline-flex~='box:justify'] > *:first-child,\n[flex~='dir:bottom'][flex~='box:justify'] > *:last-child,\n[inline-flex~='dir:bottom'][inline-flex~='box:justify'] > *:last-child {\n height: auto;\n -webkit-box-flex: 0;\n -webkit-flex-grow: 0;\n -ms-flex-positive: 0;\n flex-grow: 0;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n/**\n * [自定义项目的放大或者缩小比例]\n */\n[flex-box='0'],\n[inline-flex-box='0'] {\n -webkit-box-flex: 0;\n -webkit-flex-grow: 0;\n -ms-flex-positive: 0;\n flex-grow: 0;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n[flex-box='1'],\n[inline-flex-box='1'] {\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-flex-shrink: 1;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n}\n\n[flex-box='2'],\n[inline-flex-box='2'] {\n -webkit-box-flex: 2;\n -webkit-flex-grow: 2;\n -ms-flex-positive: 2;\n flex-grow: 2;\n -webkit-flex-shrink: 2;\n -ms-flex-negative: 2;\n flex-shrink: 2;\n}\n\n[flex-box='3'],\n[inline-flex-box='3'] {\n -webkit-box-flex: 3;\n -webkit-flex-grow: 3;\n -ms-flex-positive: 3;\n flex-grow: 3;\n -webkit-flex-shrink: 3;\n -ms-flex-negative: 3;\n flex-shrink: 3;\n}\n\n[flex-box='4'],\n[inline-flex-box='4'] {\n -webkit-box-flex: 4;\n -webkit-flex-grow: 4;\n -ms-flex-positive: 4;\n flex-grow: 4;\n -webkit-flex-shrink: 4;\n -ms-flex-negative: 4;\n flex-shrink: 4;\n}\n\n[flex-box='5'],\n[inline-flex-box='5'] {\n -webkit-box-flex: 5;\n -webkit-flex-grow: 5;\n -ms-flex-positive: 5;\n flex-grow: 5;\n -webkit-flex-shrink: 5;\n -ms-flex-negative: 5;\n flex-shrink: 5;\n}\n\n[flex-box='6'],\n[inline-flex-box='6'] {\n -webkit-box-flex: 6;\n -webkit-flex-grow: 6;\n -ms-flex-positive: 6;\n flex-grow: 6;\n -webkit-flex-shrink: 6;\n -ms-flex-negative: 6;\n flex-shrink: 6;\n}\n\n[flex-box='7'],\n[inline-flex-box='7'] {\n -webkit-box-flex: 7;\n -webkit-flex-grow: 7;\n -ms-flex-positive: 7;\n flex-grow: 7;\n -webkit-flex-shrink: 7;\n -ms-flex-negative: 7;\n flex-shrink: 7;\n}\n\n[flex-box='8'],\n[inline-flex-box='8'] {\n -webkit-box-flex: 8;\n -webkit-flex-grow: 8;\n -ms-flex-positive: 8;\n flex-grow: 8;\n -webkit-flex-shrink: 8;\n -ms-flex-negative: 8;\n flex-shrink: 8;\n}\n\n[flex-box='9'],\n[inline-flex-box='9'] {\n -webkit-box-flex: 9;\n -webkit-flex-grow: 9;\n -ms-flex-positive: 9;\n flex-grow: 9;\n -webkit-flex-shrink: 9;\n -ms-flex-negative: 9;\n flex-shrink: 9;\n}\n\n[flex-box='10'],\n[inline-flex-box='10'] {\n -webkit-box-flex: 10;\n -webkit-flex-grow: 10;\n -ms-flex-positive: 10;\n flex-grow: 10;\n -webkit-flex-shrink: 10;\n -ms-flex-negative: 10;\n flex-shrink: 10;\n}\n\n/*\n * 允许项目进行排列\n */\n/**\n * [允许项目进行排列]\n */\n[order='0'] {\n -webkit-box-ordinal-group: 1;\n -webkit-order: 0;\n -ms-flex-order: 0;\n order: 0;\n}\n\n[order='1'] {\n -webkit-box-ordinal-group: 2;\n -webkit-order: 1;\n -ms-flex-order: 1;\n order: 1;\n}\n\n[order='2'] {\n -webkit-box-ordinal-group: 3;\n -webkit-order: 2;\n -ms-flex-order: 2;\n order: 2;\n}\n\n[order='3'] {\n -webkit-box-ordinal-group: 4;\n -webkit-order: 3;\n -ms-flex-order: 3;\n order: 3;\n}\n\n[order='4'] {\n -webkit-box-ordinal-group: 5;\n -webkit-order: 4;\n -ms-flex-order: 4;\n order: 4;\n}\n\n[order='5'] {\n -webkit-box-ordinal-group: 6;\n -webkit-order: 5;\n -ms-flex-order: 5;\n order: 5;\n}\n\n[order='6'] {\n -webkit-box-ordinal-group: 7;\n -webkit-order: 6;\n -ms-flex-order: 6;\n order: 6;\n}\n\n[order='7'] {\n -webkit-box-ordinal-group: 8;\n -webkit-order: 7;\n -ms-flex-order: 7;\n order: 7;\n}\n\n[order='8'] {\n -webkit-box-ordinal-group: 9;\n -webkit-order: 8;\n -ms-flex-order: 8;\n order: 8;\n}\n\n[order='9'] {\n -webkit-box-ordinal-group: 10;\n -webkit-order: 9;\n -ms-flex-order: 9;\n order: 9;\n}\n\n[order='10'] {\n -webkit-box-ordinal-group: 11;\n -webkit-order: 10;\n -ms-flex-order: 10;\n order: 10;\n}\n\n[order='11'] {\n -webkit-box-ordinal-group: 12;\n -webkit-order: 11;\n -ms-flex-order: 11;\n order: 11;\n}\n\n[order='12'] {\n -webkit-box-ordinal-group: 13;\n -webkit-order: 12;\n -ms-flex-order: 12;\n order: 12;\n}\n\n[order='-1'] {\n -webkit-box-ordinal-group: 0;\n -webkit-order: -1;\n -ms-flex-order: -1;\n order: -1;\n}\n\n[order='-2'] {\n -webkit-box-ordinal-group: -1;\n -webkit-order: -2;\n -ms-flex-order: -2;\n order: -2;\n}\n\n[order='-3'] {\n -webkit-box-ordinal-group: -2;\n -webkit-order: -3;\n -ms-flex-order: -3;\n order: -3;\n}\n\n[order='-4'] {\n -webkit-box-ordinal-group: -3;\n -webkit-order: -4;\n -ms-flex-order: -4;\n order: -4;\n}\n\n[order='-5'] {\n -webkit-box-ordinal-group: -4;\n -webkit-order: -5;\n -ms-flex-order: -5;\n order: -5;\n}\n\n[order='-6'] {\n -webkit-box-ordinal-group: -5;\n -webkit-order: -6;\n -ms-flex-order: -6;\n order: -6;\n}\n\n[order='-7'] {\n -webkit-box-ordinal-group: -6;\n -webkit-order: -7;\n -ms-flex-order: -7;\n order: -7;\n}\n\n[order='-8'] {\n -webkit-box-ordinal-group: -7;\n -webkit-order: -8;\n -ms-flex-order: -8;\n order: -8;\n}\n\n[order='-9'] {\n -webkit-box-ordinal-group: -8;\n -webkit-order: -9;\n -ms-flex-order: -9;\n order: -9;\n}\n\n[order='-10'] {\n -webkit-box-ordinal-group: -9;\n -webkit-order: -10;\n -ms-flex-order: -10;\n order: -10;\n}\n\n[order='-11'] {\n -webkit-box-ordinal-group: -10;\n -webkit-order: -11;\n -ms-flex-order: -11;\n order: -11;\n}\n\n[order='-12'] {\n -webkit-box-ordinal-group: -11;\n -webkit-order: -12;\n -ms-flex-order: -12;\n order: -12;\n}\n\n/*\n * 允许单个项目有与其他项目不一样的对齐方式\n */\n/**\n * [表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch(默认)]\n */\n[flex~='item:auto'],\n[inline-flex~='item:auto'] {\n -webkit-align-self: auto;\n -ms-flex-item-align: auto;\n align-self: auto;\n}\n\n/**\n * [居于轴顶部对齐]\n */\n[flex~='item:start'],\n[inline-flex~='item:start'] {\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n}\n\n/**\n * [居于轴尾部对齐]\n */\n[flex~='item:end'],\n[inline-flex~='item:end'] {\n -webkit-align-self: flex-end;\n -ms-flex-item-align: end;\n align-self: flex-end;\n}\n\n/**\n * [居于轴中心对齐]\n */\n[flex~='item:center'],\n[inline-flex~='item:center'] {\n -webkit-align-self: center;\n -ms-flex-item-align: center;\n align-self: center;\n}\n\n/**\n * [居于基线对齐]\n */\n[flex~='item:baseline'],\n[inline-flex~='item:baseline'] {\n -webkit-align-self: baseline;\n -ms-flex-item-align: baseline;\n align-self: baseline;\n}\n\n/**\n * [充满整个轴]\n */\n[flex~='item:stretch'],\n[inline-flex~='item:stretch'] {\n -webkit-align-self: stretch;\n -ms-flex-item-align: stretch;\n align-self: stretch;\n}\n"]}