其實(shí)就是彈性布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://github.com/icindy/wxflex
轉(zhuǎn)載上面鏈接椰拒，
采用Flex布局的元素，稱(chēng)為Flex容器（flex container）筐钟，簡(jiǎn)稱(chēng)"容器"堕花。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex項(xiàng)目（flex item）圈暗，簡(jiǎn)稱(chēng)"項(xiàng)目"掂为。
以下6個(gè)屬性設(shè)置在容器上。
● flex-direction
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）员串。
● row（默認(rèn)值）：主軸為水平方向勇哗，起點(diǎn)在左端。
● row-reverse：主軸為水平方向寸齐，起點(diǎn)在右端欲诺。
● column：主軸為垂直方向，起點(diǎn)在上沿渺鹦。
● column-reverse：主軸為垂直方向扰法，起點(diǎn)在下沿。
● flex-wrap
默認(rèn)情況下毅厚，項(xiàng)目都排在一條線（又稱(chēng)"軸線"）上塞颁。flex-wrap屬性定義，如果一條軸線排不下吸耿，如何換行祠锣。
（1）nowrap（默認(rèn)）：不換行。
（2）wrap：換行咽安，第一行在上方伴网。
（3）wrap-reverse：換行，第一行在下方妆棒。
● flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式澡腾，默認(rèn)值為row nowrap沸伏。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
● justify-content
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
● flex-start（默認(rèn)值）：左對(duì)齊
● flex-end：右對(duì)齊
● center： 居中
● space-between：兩端對(duì)齊动分，項(xiàng)目之間的間隔都相等毅糟。
● space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以刺啦，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍留特。
● align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
● flex-start：交叉軸的起點(diǎn)對(duì)齊玛瘸。
● flex-end：交叉軸的終點(diǎn)對(duì)齊蜕青。
● center：交叉軸的中點(diǎn)對(duì)齊。
● baseline: 項(xiàng)目的第一行文字的基線對(duì)齊糊渊。
● stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto右核，將占滿整個(gè)容器的高度。
● align-content
align-content屬性定義了多根軸線的對(duì)齊方式渺绒。如果項(xiàng)目只有一根軸線贺喝，該屬性不起作用。
● flex-start：與交叉軸的起點(diǎn)對(duì)齊宗兼。
● flex-end：與交叉軸的終點(diǎn)對(duì)齊躏鱼。
● center：與交叉軸的中點(diǎn)對(duì)齊。
● space-between：與交叉軸兩端對(duì)齊殷绍，軸線之間的間隔平均分布染苛。
● space-around：每根軸線兩側(cè)的間隔都相等。所以主到，軸線之間的間隔比軸線與邊框的間隔大一倍茶行。
● stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
以下6個(gè)屬性設(shè)置在項(xiàng)目上登钥。
● order
order屬性定義項(xiàng)目的排列順序畔师。數(shù)值越小，排列越靠前牧牢，默認(rèn)為0看锉。
● flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0结执，即如果存在剩余空間度陆，也不放大。
如果所有項(xiàng)目的flex-grow屬性都為1献幔，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2趾诗，其他項(xiàng)目都為1蜡感，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍蹬蚁。
● flex-shrink
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1郑兴，即如果空間不足犀斋，該項(xiàng)目將縮小。
果所有項(xiàng)目的flex-shrink屬性都為1情连，當(dāng)空間不足時(shí)叽粹，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0却舀，其他項(xiàng)目都為1虫几，則空間不足時(shí)，前者不縮小挽拔。
● flex-basis
flex-basis屬性定義了在分配多余空間之前辆脸，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性螃诅，計(jì)算主軸是否有多余空間啡氢。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小术裸。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）倘是，則項(xiàng)目將占據(jù)固定空間。
● flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)袭艺，默認(rèn)值為0 1 auto搀崭。后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)匹表。
建議優(yōu)先使用這個(gè)屬性门坷，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值袍镀。
● align-self
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式默蚌，可覆蓋align-items屬性。默認(rèn)值為auto苇羡，表示繼承父元素的align-items屬性绸吸，如果沒(méi)有父元素，則等同于stretch设江。
該屬性可能取6個(gè)值锦茁，除了auto，其他都與align-items屬性完全一致叉存。
