scss-flex
Version:
flexbox，移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器
1 lines • 14.8 kB
CSS
*{-webkit-tap-highlight-color:transparent;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}body{font-size:14px;font-family:-apple-system,Helvetica,Microsoft YaHei,Arial,sans-serif;line-height:1.5;color:#000;background-color:#fff;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[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"]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}[flex~="dir:right"],[inline-flex~="dir:right"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[flex~="dir:top"],[inline-flex~="dir:top"]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}[flex~="dir:bottom"],[inline-flex~="dir:bottom"]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;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~="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"]>*,[flex~="box:justify"]>*,[flex~="box:last"]>*,[flex~="box:mean"]>*,[inline-flex~="box:first"]>*,[inline-flex~="box:justify"]>*,[inline-flex~="box:last"]>*,[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,[flex~="box:justify"]>:first-child,[flex~="box:justify"]>:last-child,[flex~="box:last"]>:last-child,[inline-flex~="box:first"]>:first-child,[inline-flex~="box:justify"]>:first-child,[inline-flex~="box:justify"]>:last-child,[inline-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~="dir:bottom"][flex~="box:first"]>*,[flex~="dir:bottom"][flex~="box:justify"]>*,[flex~="dir:bottom"][flex~="box:last"]>*,[flex~="dir:bottom"][flex~="box:mean"]>*,[flex~="dir:top"][flex~="box:first"]>*,[flex~="dir:top"][flex~="box:last"]>*,[flex~="dir:top"][flex~="box:mean"]>*,[inline-flex~="dir:bottom"][inline-flex~="box:first"]>*,[inline-flex~="dir:bottom"][inline-flex~="box:justify"]>*,[inline-flex~="dir:bottom"][inline-flex~="box:last"]>*,[inline-flex~="dir:bottom"][inline-flex~="box:mean"]>*,[inline-flex~="dir:top"][inline-flex~="box:first"]>*,[inline-flex~="dir:top"][inline-flex~="box:justify"]>*,[inline-flex~="dir:top"][inline-flex~="box:mean"]>*{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: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,[flex~="dir:top"][flex~="box:first"]>:first-child,[flex~="dir:top"][flex~="box:justify"]>:first-child,[flex~="dir:top"][flex~="box:justify"]>:last-child,[flex~="dir:top"][flex~="box:last"]>:last-child,[inline-flex~="dir:bottom"][inline-flex~="box:first"]>:first-child,[inline-flex~="dir:bottom"][inline-flex~="box:justify"]>:first-child,[inline-flex~="dir:bottom"][inline-flex~="box:justify"]>:last-child,[inline-flex~="dir:bottom"][inline-flex~="box:last"]>:last-child,[inline-flex~="dir:top"][inline-flex~="box:first"]>:first-child,[inline-flex~="dir:top"][inline-flex~="box:justify"]>:first-child,[inline-flex~="dir:top"][inline-flex~="box:justify"]>:last-child,[inline-flex~="dir:top"][inline-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"],[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}[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}