flex

基本概念

採用Flex佈局的元素，稱爲Flex容器，簡稱」容器」。 
注： **設了flex以後 子元素的float clear vertical-align屬性將失效 
將元素轉爲彈性盒：display:flex**

容器的屬性

flex-direction 元素的排列方向 

.box {

　　flex-direction: row | row-reverse | column | column-reverse;

}

row（默認值）：主軸爲水平方向，起點在左端。

row-reverse：主軸爲水平方向，起點在右端。

column：主軸爲垂直方向，起點在上沿。

column-reverse：主軸爲垂直方向，起點在下沿。

 

flex-wrap 是否換行

.box{

　　flex-wrap: nowrap | wrap | wrap-reverse;

}

nowrap 默認不換行

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

 

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-start | flex-end | center | baseline | stretch;

}

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

 

flex-flow （flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。水平不換行）

 

分配比例

 

order:value(數值越小，越靠前排列)

 

lex-grow 父元素拉伸時子元素的拉伸比例值

 

flex-shrink 父元素縮小時子元素的收縮比例值

 

flex-basis 子元素的初始顯示比例值

 

flex: [flex-grow，flex-shrink，flex-basis]的簡寫形式

 

align-self(屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。)

 

flex:value(數值，數值是多少就佔多少比例)

 

左邊固定寬，右邊自適應

 

***html***

　　<div class="container">

　　　　<div class="box box1">1</div>

　　　　<div class="box box2">2</div>

　　</div>

***css***

　　.container{

　　　　width: 100%;

　　　　height: 100px;

　　　　display: flex;

　　}

　　.box1{

　　　　background: pink;

　　　　width:100px;

　　}

　　.box2{

　　　　background: green;

　　　　flex:1;

　　}