Flex是Flexible Box的縮寫，意為"彈性布局"。任何一個容器都可以指定為Flex布局，塊級元素為display:block，行內元素為display:inline-flex。
注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
以下是一個實現Flex基本布局的代碼:
<style> .container{ width: 100%; height: 200px; background-color: white; display: flex; } .box_1{ flex: 1; background-color: red; } .box_2{ flex: 2; background-color: yellow; } .box_3{ flex: 3; background-color: green; } </style> <body> <div class="container"> <div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div> </div> </body>
子容器的flex屬性值代表所占據的權重，顯示如下：
flex-direction: row | row-reverse | column | column-reverse;屬性決定主軸的方向，默認為flex-direction: row；
當我們添加：
.container{flex-direction:column}
顯示如下：
flex-wrap: nowrap | wrap | wrap-reverse; flex-wrap屬性可以決定當子元素在主軸上無法排下時，是否換行
添加：
.container{ flex-wrap:wrap;}
.box_1{ flex: 0 0 50%;}
.box_2{ flex: 0 0 50%;}
.box_3{ flex: 0 0 50%;}
顯示如下
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
none：none關鍵字的計算值為: 0 0 auto
<' flex-grow '>：用來指定擴展比率，即剩余空間是正值時此「flex子項」相對於「flex容器」里其他「flex子項」能分配到空間比例。
在「flex」屬性中該值如果被省略則默認為「1」(當此值為0時子元素之間才會出現空隙)
<' flex-shrink '>：用來指定收縮比率，即剩余空間是負值時此「flex子項」相對於「flex容器」里其他「flex子項」能收縮的空間比例。在收縮的時候收縮比率會以伸縮基准值加權
在「flex」屬性中該值如果被省略則默認為「1」
<' flex-basis '>：用來指定伸縮基准值，即在根據伸縮比率計算出剩余空間的分布之前，「flex子項」長度的起始數值。
在「flex」屬性中該值如果被省略則默認為「0%」
在「flex」屬性中該值如果被指定為「auto」，則伸縮基准值的計算值是自身的 <' width '> 設置，如果自身的寬度沒有定義，則長度取決於內容。
justify-content: flex-start | flex-end | center | space-between | space-around;屬性定義了項目在主軸上的對齊方式。
添加：
.container{ justify-content:space-around; }
.box_1{ flex: 0 0 30%;}
.box_2{ flex: 0 0 30%;}
.box_3{ flex: 0 0 30%;}
顯示如下：
align-items: flex-start | flex-end | center | baseline | stretch;屬性定義項目在交叉軸上如何對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
添加：
.container{ align-items:center; }
.box_1{ height: 100px;}
.box_2{ height: 120px;}
.box_3{ height: 140px;}
顯示：
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
添加：
.box_1{ order: 3;}
.box_2{ order: 2;}
.box_3{ order: 1;}
顯示：
align-self: auto | flex-start | flex-end | center | baseline | stretch;align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
添加：
.box_1{align-self: flex-start}
顯示：
align-content: flex-start | flex-end | center | space-between | space-around | stretch;屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
例如：
<style> .container{ width: 100%; height: 200px; background-color: white; display: flex; flex-wrap:wrap; justify-content:space-around; align-items: center; align-content: space-between; } .box_1{ flex: 0 0 30%; background-color: red; height: 50px} .box_2{ flex: 0 0 30%; background-color: yellow; height: 50px} .box_3{ flex: 0 0 30%; background-color: green; height: 50px} </style> <script src="jquery-1.8.3.min.js"></script> <body> <div class="container"> <div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div> <div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div> <div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div> </div> </body>
顯示：
