溫習flex（1）
以一篇簡單的flex代碼舉例，重點在溫習flex的命令和其相關的屬性和實現的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
width: 400px;
display: flex;
/*display: inline-flex; // 行內元素通過這種方式指定為Flex布局*/
list-style: none;
flex-direction : /*row*/
row-reverse
/*column*/
/*column-reverse*/
;
flex-wrap :
/*nowrap*/
wrap
/*wrap-reverse*/
;
/*-webkit-flex-flow: ;
-moz-flex-flow: ;
-ms-flex-flow: ;
-o-flex-flow: ;*/
/*flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。*/
justify-content : /*flex-start*/
/*flex-end*/
/*center*/
space-between
/*space-around*/
;
align-items : flex-start
/*flex-end
center
baseline
stretch*/
;
/*align-content:align-content屬性定義了容器在側軸方向上有額外空間時，如何每排布一行，當容器只有一行時，它不起作用，它可能有六個值。flex-start/flex-end/center/stretch/space-between/space-around*/
/*子元素的屬性order 排列順序
flex-grow／ 放大比例
flex-shrink／ 縮小比例
flrc-basis／ 屬性定義了在分配多余空間之前，項目占據的主軸空間（main-size）。瀏覽器根據整個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。也可以寫數值，單位px
flex／ flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto)（既可以放大占滿空間，也可縮小） 和 none (0 0 auto)（不可放大，也不可縮小）。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
align-self ／align-self屬性允許單個項目有與其他項目不一樣的側軸對齊方式，可覆蓋align-items屬性
*/
}
ul>li{
}
</style>
</head>
<body>
<ul id = "ul">
<li>測試flex1</li>
<li>測試flex2</li>
<li>測試flex3</li>
<li>測試flex4</li>
<li>測試flex5</li>
<li>測試flex6</li>
</ul>
</body>
</html>
相關的屬性及其效果文中已有闡述，可以自己copy代碼進行驗證或實驗，如此映像才會深刻。
由於現階段ie8仍舊占據著一定的市場，具體的可以用其他的方法實現或者css hack來解決，綜述flex是一個非常好的屬性，個人非常喜歡，對於頁面的構成和規範的框架flex是一個相當簡潔的實現方式。關於flex的使用心得以後持續更新。
溫習flex（1）