css --- flex布局
阿新 • • 發佈：2017-07-29
isp order any spl eight splay 交叉點 container 位置
Flex 是 Flexible Box 的縮寫，意為"彈性布局"。任何一個容器都可以指定為 Flex 布局。語法部分參考鏈接在文末給出一篇阮一峰大神的文章，講的非常詳細。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
註意，設為 Flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
在頁面布局上，使用盒子布局------flex.如下圖所示，下面是一種簡易例子，並給出註釋：
代碼如下：
<!doctype html> <html> <head> <title>box</title> <style> .wrap{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;//必須，此時采用flex布局 -moz-box-orient: vertical; -webkit-box-orient: vertical;//子元素縱向排列 -ms-box-orient: vertical; -webkit-flex-direction: column;//主線為垂直 -ms-flex-direction: column; flex-direction: column; } .lay{ width:150px; height:150px; border:1px solid red; margin:10px; padding:10px; } .box1 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1;//定義項目的排列順序，數值越小，排列越靠前，默認為0 } .box2 { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; } .box3{ -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2;
align-self: flex-start;//允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值為auto，表示繼承父元素的align-items屬性
width:90%;
} </style> </head> <body> <div class="wrap"> <div class="box1 lay"> this is box 1 </div> <div class="box2 lay"> this is box 2 </div> <div class="box3 lay"> this is box 3 </div> </div> </body> </html>
參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool Flex布局教程：語法篇
css --- flex布局