box-flex 彈性可伸縮盒模型

box-flex 彈性可伸縮盒模型

之前一直針對於PC端開發，自適應方面接觸甚少，一般來說用些的 css 方法就直接解決一些設計問題，直到目前現狀開始轉變為純移動端開發，於是乎開始慢慢接觸移動端的新特性的實戰，今天主要做一下 flexbox 的筆記。

Flexbox 布局模塊提供了我們一個在未知或者動態容器中自適應出我們所希望的布局形式。垂直居中，重新排序，布局動態的伸展以及收縮等。目前在移動端大體來說兼容性還不錯 can I use(Flex)。 Flexbox 實質來說並不能僅僅作為一種屬性，而是作為一類模塊，包括作為父元素的伸縮容器以及子元素的伸縮元素。伸縮元素會依據伸縮容器具體變化，類似於在一些情況下我們盒大小使用百分比情況類似，不過使用百分比總會有那麼一些時候需要我們使用不太規范的方式來處理某些特定的情況情況。
前提是容器的寬高已定：

對於上面很常見的布局邏輯，一般來說會簡單的使用下面形式的 html

<div class="container">
 
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div> 

配合以下的 css

.container{
 
width: 300px;
height: 100px;
margin: 50px;
}
.item{
float: left;
width: 33.33%;
height: 100%;
}
.item:nth-child(1){
background-color: #333;
}
.item:nth-child(2){
background-color: #666;
}
.item:nth-child(3){
background-color: #999;
} 

但是 我們更多的是會遇到這種形式

那麼 好吧 借助於一些通用的 css3 的偽類選擇器 還是可以寫的稍微好看一點，不過 html 也需要稍微惡心的包上一層，當然也有好多簡單的 hack寫法

<div class="container1">
 
<div class="item1">
<div class="innerItem1"></div>
</div>
<div class="item1">
<div class="innerItem1"></div>
</div>
<div class="item1">
<div class="innerItem1"></div>
</div>
</div> 

css 如下

.container1{
 
width: 300px;
height: 100px;
margin: 50px;
border: 1px solid #000;
}
.item1{
float: left;
width: 33.33%;
height: 100%;
}
.innerItem1{
height: 90px;
margin: 5px 5px 5px 0;
background-color: #CCC;
}
.item1:nth-child(1) .innerItem1{
margin-left: 5px;
} 

好的，flexbox 閃亮登場 如何使用例1中的 html 結構 優美的寫出例2的布局呢？

<div class="container">
 
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div> 

首先，對於 flexbox 我們需要創建一個 flex 容器，設置其 display 屬性

.container{
 
width: 300px;
height: 100px;
margin: 50px;
border: 1px solid #000;

display:-webkit-flex;
display:-ms-flexbox;
display:flex;
} 

在對其子元素設置 flex：

.item{
 
flex:1;
background-color: #999;
margin: 5px 5px 5px 0;
}

.item:nth-child(1){
margin-left: 5px;
} 

使得我們既不需要多放置一層div，也無需來處理寫死內部伸縮元素的高度，最主要的卻是內部元素的寬高已經完全依賴自適應於容器元素。將容器元素寬高隨意配置均可使其子元素得到自適應（之前多嵌套一層的 高度上依舊不是很好處理）。
然後，處理高度的來了，先來個垂直居中吧。

好吧，一般形式的已經不想寫了，直接看下 flexbox 的形式

<div class="container-h">
 
<div class="item-h"></div>
</div> 

.container-h{
 
height: 300px;
width: 100px;
margin: 50px;
border: 1px solid #000;

display:-webkit-flex;
display:-ms-flexbox;
display:flex;

/*垂直居中*/ 
-webkit-align-items: center;
align-items: center;
}

.item-h{
flex:1;
height:100px;
background-color: #999;
margin: 5px;
} 

終於寫個垂直居中，我可以不用量 line-height，不用設置margin，也不用去攀比各種css的奇思妙想了。突然感覺世界的起跑線都一樣了。
好了，先來熟悉下了解 felxbox 之前的一些簡單概念： 伸縮容器：一個設置了 display 為 flex 或者 inline-flex 的外層元素 伸縮元素：在伸縮容器中的子元素 主軸：延伸縮容器配置伸縮元素的方向 側軸：主軸的垂直線
各個屬性簡單介紹：
flex-direction : row | row-reverse | column | column-reverse; 在伸縮容器上定義用來定義主軸方向。
row：為默認方向，排版方向

row-reverse：與 row 反方向

column：從上到下排版

column-reverse：與 column 排版方向相反

flex-wrap : nowrap | wrap | wrap-reverse; 在伸縮容器上用來定義容器內伸縮元素是單行還是多行顯示。（各個伸縮元素設置最小高寬，在每個元素最小寬度下伸縮容器無法一行內放置的時候所做的處理）
nowrap：默認值，伸縮容器為單行顯示，當容器太小時，內部元素會跑出

wrap：內部元素會多行顯示，伸縮容器一行內放置不下的元素會被放置到下一行（與排版方向有關）

wrap-reverse ：內部元素會多行顯示，伸縮容器一行內放置不下的元素會被往上位置放置


flex-flow : || 為上面兩種屬性的縮寫版。

justify-content ： flex-start | flex-end | center | space-between | space-around; 為可伸縮模型的重頭戲，也是真正優雅實現各種居中的css3屬性。
flex-start：伸縮元素向起始位置靠齊

flex-end：伸縮元素向結束位置靠齊

center：伸縮元素居中

space-between：均勻分布，第一個向起始位置靠齊，最後一個向結束位置靠齊


space-around：伸縮元素平均分布在行裡，首尾保留一半空間



align-items：flex-start | flex-end | center | baseline | stretch;
用來定義伸縮容器內部的伸縮項目在側軸上的對齊方式
flex-start：伸縮元素向側軸起始位子靠攏

flex-end：伸縮元素向側軸結束位子靠攏

center: 伸縮元素居中對齊

baseline：側軸方向根據基線對齊

stretch : 為默認值，會更具伸縮的狀態盡可能填充伸縮容器。

還有部分屬性就不一一分析了：
order：<int> 標示伸縮項目在容器中的排序先後。

flex : none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
flex-grow : <number> 伸縮元素的無單位的伸縮比例 flex-shrink : <number> 根據彈性盒子元素所設置的收縮因子來作比例收縮空間。 flex-basis : <length> 根據彈性盒子元素所設置的收縮因子來作比例收縮剩余的空間。

測試頁面代碼請看，在控制台中嘗試各種屬性值 http://hello.exptui.com/demo/cssDemo/flexbox.html