目前剛參加工作不久，能力不足，經常會踩到一些簡單的坑，記錄下來，防止自己再重犯。
首先想寫寫Flex佈局（彈性佈局），因爲在項目中用得挺頻繁的，對一些基本的概念和實踐做個小結 （主要是摘抄Mozilla的文檔 : ）
Flex佈局概念
對佈局比較瞭解的同學可能會發現，塊級佈局更側重於垂直方向，行內佈局更側重於水平方向，與此相對的，Flex佈局是通過調整其內元素的寬高，實現自動填充的一種能力。Flex容器擴展其內元素來填充可用空間，或將其收縮來避免溢出。
來看張flex-direction爲row的一個Flex容器：
其內的flex item將根據row的模式沿主軸水平排列，方向爲元素的文本流方向。
彈性容器(Flex container)
包含着彈性項目的父元素。通過設置display屬性值爲flex或inline-flex即可定義彈性容器。
彈性項目(Flex item)
彈性容器的每個子元素都稱爲彈性項目。
軸(Axis)
每個彈性框佈局包含兩個軸。彈性項目依次排列的那根軸稱爲主軸(main axis)，同時垂直於主軸的那根軸稱爲側軸(cross axis)。
- flex-direction 確立主軸
- justify-content 定義了在當前行上，彈性項目沿主軸如何排布
- align-items 定義了在當前行上，彈性項目沿側軸默認如何排布
- align-self 定義了單個彈性項目在側軸上應當如何對齊，這個定義會覆蓋由align-items所確定的默認值
方向（Direction）
描述了彈性項目排布的起點與終點。
如order屬性可將元素與序號關聯起來，數值越小越靠前，依次決定哪些元素排在前面。
Tips：一些不會對Flex佈局產生影響的屬性：
由於Flex佈局使用了不同的佈局算法，某些屬性在彈性容器上沒有意義。
- 多欄佈局模塊的column-*屬性對彈性項目無效
- float與clear對彈性項目無效。使用float將使元素的display屬性計爲block
- vertical-align對彈性項目的對齊無效
下面舉一個經典的聖盃佈局(HolyGrailLayout)來加深理解
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row;
}
#main > article {
margin: 4px;
padding: 5px;
/* flex屬性分別是flex-grow、flex-shrink以及flex-basis屬性的簡寫 */
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
flex: 1 6 20%;
order: 3;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
}
/* 窄到已不足以支持三欄 */
@media all and (max-width: 640px) {
#main,#page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* 恢復到文檔內的自然順序 */
order: 0;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<header>header</header>
<div id="main">
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
</html>
這裏展示的正是瀏覽器窗口的頁面佈局必須爲智能手機窗口優化的場景。不僅元素的尺寸需要縮減，其呈現順序也需要改變。Flex佈局讓這變得很簡單。