flex進行頁面的基礎佈局

接觸flex有一段時間了，因爲本身在移動上的經驗比較少，一直覺得這個和css3的其餘屬性差很少，就是一個盒模型的縮放之類的。今天一個移動的小項目用到了這個屬性，仔細看了下，先不說裏面具體的屬性，就flex自身來講，就能夠完爆經常使用的float進行佈局。

因爲歷史緣由，flex在以前也曾經被表達成box-flex, 看到一個很好的解釋（英文的）,原句比較長，我簡略了下：

if you Google around about Flex, you will find lots of information. Here's how you can quickly tell.

1. if you see display:box or a box-{*} property, you are looking at the old 2009 version.

2. if you see display:flexbox and the flex() function, you are looking at an akward phrase at 2011.

3. if you see display:flex and the flex-{*} property, you are looking at the current version.

flex是彈性佈局的意思, 我理解是按比例分配的意思。這裏網上一個博客寫的很易懂。基礎的知識再也不贅述。這裏主要提到在佈局上，尤爲是等高佈局時的應用。

常見的，好比左側固定，右側自適應的佈局（好多種方法均可以實現），可是若是左側和右側須要等高呢，傳統的佈局方法，我想了一下，只想出了一種。

#father{
    overflow: hidden;
}
#left{
   width: 200px;      
}
#right{
  float: right;
}

　這裏是以右側的高度爲基準進行的，左側和右側的高度保持一致。由於浮動元素的高度是被其內容決定的，標準流元素的高度是由父元素的高度來決定的。因此這裏將右側設置爲浮動，在html也要注意，須要將浮動元素寫到前面。

<div id="father">
    <div id="right"></div>
    <div id="left"></div>
</div>

鋪墊好長。。。。 累死寶寶了

下面進入正題：

#father{
    width: 900px;
    display: flex;
    background: #ccc;
    height: 300px;
}
/*大寶說最少要200px寬*/
#child-1{
    background: red;
    width: 200px;
}
/*二寶的比例是1，就是去掉大寶的200px後，二寶和父親的比例是1:1*/
#child-2{
    flex: 1;
    -background: green;
}

也不須要什麼BFC了，也不須要什麼浮動了，直接等高，看起來好舒服的說~~~

而且，即便是三列布局，四列布局，寬度自適應佈局，通通按照約定的比例進行執行就能夠了。

#father{
    display: flex;
    width: 1000px;
    height: 500px;
}

#child-1{
    flex: 1;
    -webkit-flex: 1; 
}

#child-2{
    flex: 4;
    -webkit-flex: 4;
}

#child-3{
    flex: 1;
    -webkit-flex: 2;
}

彈性佈局就是這麼任性~~~

PS: 今天還發現了一個好玩的東西 ：autoprefixer:https://github.com/postcss/autoprefixer.好比你寫了一個display: flex 腳本跑完後會自動將各個瀏覽器下的那些個-webkit....-moz-....等補齊，真是個好東西，惋惜要在grup下使用，待姐姐摸索完了後再來記錄。