Css3的flex布局用法
Flex意為“彈性布局”，英文flexible box的縮寫，flex布局使css盒模型變得更加強大和靈活，flex布局主要用在webapp和移動端中使用，移動端flex布局，將使的布局變得異常簡單。
任何一個容器都可以指定為flex布局；
行內元素也可以使用flex布局。
.box{display:inline-flex;}
Webkit內核的瀏覽器，必須加上-webkit前綴
.box{ display:-webkit;/*Safari*/display:flex;}
設為flex布局后，子元素的float、clear、和vertical-align屬性將失效。
基本概念：
采用css3 flex布局的元素,稱為flex容器，它的所有子元素自動稱為容器成員，稱為(flex item)
容器默認存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫main start,結束位置叫做 main end；交叉抽的開始位置叫做cross start,結束位置叫做cross end;
容器的6個屬性：
- flex-directio:
決定主軸的方向（即項目排列的方向）
用法：.box{flex-direction:row|row-reverse|column|column-reverse}
row:默認值 水平從左向右 row-reverse:水平從右向左 column:豎直從上往下 column-reverse：豎直從下往上
- flex-wrap:
默認情況下項目都排在一條（軸線）線上,flex-warp屬性定義，如果一條軸線排不下，如何換行。
用法：.box{flex- wrap:nowrap| wrap | wrap -reverse;}
nowrap:默認不換行 wrap：換行，第一行在上 wrap -reverse：換行，第一行在下方
- flex-flow:
flex-flow屬性是flex-direction屬性和flex- wrap屬性的簡寫形式，默認值是row no wrap。
用法.box{ flex-flow:<flex-direction> || <flex-wrap>}
- justify-content:
定義了項目在主軸的對齊方式
用法：.box{justify-content:flex-start | flex-end | center | space-between | space-around;}
flex-start:左對齊 flex-end:右對齊 center:居中 space-between:兩端對齊，項目之間的間隔都相等 space-around: 每個項目兩側的間隔相等，所以，項目之間的間隔比項目與邊框的間隔大一倍
- align-items:
定義項目在交叉上如何對齊
用法： . box{align-items:flex-satrt |flex-end|center|baseline|stretch}
它可能取5個值，具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下
flex-start:交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center:交叉軸中點對齊
baseline:項目中第一行文字的基線對齊
stretch（默認值）：如果項目未設置高度或者為auto，將占滿整個容器的高度
- align-content
定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
用法：.box{ align-content:flex-start | flex-end|center|space-between|space-around |stretch}
flex-start:與交叉軸起點對齊
flex-end:與交叉軸終點對齊
center：與交叉軸中點對齊
space-between:與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around:每根軸線兩側的間隔都相等，所以，軸線之間的間隔與邊框的間隔大一倍
stretch(默認):軸線占滿整個交叉軸
項目的6個屬性:
- order:
定義項目的排列順序，數值越小，排列越靠前，默認為0
用法: . item{order:<interger>;}
- flex-grow
定義項目的放大比例，默認為0，如果存在剩余空間，也不放大
用法 ：.item{ flex-grow:<number>/*default 0*/}
- flex-shrink
定義了項目的縮小比例，默認為1，即如果控件不足，該項目將縮小
用法：.item{ flex-shrink:<number>;/*default 1*/}
- flex-basis
定義了在分配多余控件之前，項目占據的主軸控件(main size).瀏覽器根據這個屬性,計算主軸是否有多余控件,它的默認值是auto,即項目的本來大小.
用法：.item{flex-basis:<length>|auto;/*default auto */}
它可以設為跟width或height屬性一樣的值(比如350px)，則項目將占據固定控件
- flex
屬性是flex-grow,flex-shrink和flex-basis的簡寫，默認值為 0 1 auto;后兩個屬性可選
用法： . item{ flex:none |[<‘flew-grow’><’flex-shrink’>?||<’flex-basis’>]}
該屬性有兩個快捷值： auto(1 1 auto)和none(0 0 auto)
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
- align-self:
允許單個項目與其他項目不一樣的對齊方式，可覆蓋align-items屬性，默認值是auto，表示繼承父類元素的align-items屬性，如果沒有父元素，則等同於stretch。
用法 ：.item{ align-self:auto(默認) | flex-start|flex-end|center|baseline|stretch}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex Box</title> <style> .flex-container { /*給容器設置布局為flex布局*/ display: -webkit-flex;/*Safari*/ display: flex; /*1.flex-direction: 參數有row|row-reverse|column|column-reverse*/ /*flex-direction:row;*/ /*2.flex-wrap:參數有nowrap|wrap|wrap-reverse;*/ /*flex-wrap:wrap;*/ /*3.flex-flow是flex-direction和flex-wrap的集合*/ flex-flow:row wrap; /*4.justify-content: 參數有 flex-start|flex-end|center|space-between|space-around*/ /*justify-content:space-around;*/ /*5.align-items：參數有 flex-start|flex-end|center|baseline|stretch*/ /*align-items:flex-end;*/ /*6.align-content:參數有 flex-start|flex-end|center|space-between|space-around|stretch;*/ align-content:space-around; height:400px; /*background-color: lightgrey;*/ } .flex-item { background-color: cornflowerblue; width: 200px; height: 100px; margin: 5px; } .flex-item1{ order: 3; flexs-shrink:0; } .flex-item3{ order: 4; /*flex-grow:1.5;*/ } .flex-item4{ /*flex-basis:600px;*/ } .flex-item5{ /*flex屬性是flex-grow,flex-shrink和flex-basis 的簡寫，默認值是0 1 auto 后兩個屬性可選*/ /*flex:0 1 auto;*/ flex:auto; 1 1 auto } .flex-item6{ /*align-self:參數有 auto(默認)|flex-start|flex-end|center|baseline|stretch|*/ /*align-self:center;*/ } .flex-item:hover{ align-self:center; } </style> </head> <body> <div class="flex-container"> <div class="flex-item flex-item1">flex item 1</div> <div class="flex-item flex-item2">flex item 2</div> <div class="flex-item flex-item3">flex item 3</div> <div class="flex-item flex-item4">flex item 4 </div> <div class="flex-item flex-item5">flex item 5 </div> <div class="flex-item flex-item6">flex item 6</div> <!-- <div class="flex-item flex-item7">flex item 7</div> --> <!-- <div class="flex-item flex-item8">flex item 8</div> <div class="flex-item flex-item9">flex item 9 </div> <div class="flex-item flex-item10">flex item 10 </div> <div class="flex-item flex-item11">flex item 11 </div> <div class="flex-item">flex item 12 </div> <div class="flex-item">flex item 13</div> <div class="flex-item">flex item 14</div> <div class="flex-item">flex item 15</div> <div class="flex-item">flex item 16 </div> <div class="flex-item">flex item 17 </div> --> </div> </body> </html>