一、flex flex是flexible box的縮寫，意為“彈性佈局”； 定義彈性佈局 display:flex; 二、基本定義 我只簡單的說一下容器和項目，因為只關係容器和項目來講的（個人理解）。 三、 容器的屬性 有6個屬性 一下對6個容器屬性的簡單介紹 1. flex-direction屬性 ...
一、flex
flex是flexible box的縮寫，意為“彈性佈局”；
定義彈性佈局
display:flex;
box{
display:flex;
}
二、基本定義
我只簡單的說一下容器和項目，因為只關係容器和項目來講的（個人理解）。
三、 容器的屬性
有6個屬性
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
一下對6個容器屬性的簡單介紹
1. flex-direction屬性決定排列方向
值：
row(預設值)：水平方向，從右邊開始。
row-reverse：水平方向，從右邊開始。
column：垂直方向，從上到下。
column-reverse：垂直方向，從下往上
2. flex-wrap如何換行
值：
nowrap（預設值）：不換行。
wrap：換行，第一行在上面
wrap-reverse：換行。第一行在下方。
3. flex-flow是上面兩個屬性的縮寫，預設值為row nowrap。
4. justify-content定義水平方向對齊方式
值：
flex-start(預設值)：左對齊。
flex-end：右對齊。
center：水平居中
space-between：兩端對齊，項目之間間隔相等。
space-around：每個項目兩側的間隔相等。
5. align-items垂直對齊方式
flex-start：y軸的起點對齊。
flex-end：y軸的終點對齊。
center：垂直居中
baseline：項目的第一行文字的基線對齊。
stretch（預設值）：如果項目沒有設置高度或者為auto，將占滿整個容器。
6. align-content定義多個軸對齊方式（這裡不詳細講解雖然整個講解都不詳細）。
四、項目屬性
一下6個項目屬性設置在項目上。
1. order
2. flex- grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self
1. order屬性定義項目的排列順序。數值越小，排列越考前，預設值為0。
2. flex- grow屬性定義項目的放大比例，預設值為0，即不放大。如果項目值都為1則平均分，有個值為2其他值為1則占據剩餘空間比1多一倍。
3. flex-shrink定義項目的縮小比例，預設為1，如過空間不足，項目將縮小。
4. flex-basis定義了在分配多餘空間之前，項目的主軸空間。它可以設為width或height屬性一樣的值，則該項目占據固定的空間。
5. flex是上面2、3、4項的簡寫方式，預設值為0 1 auto。
6. align-self屬性允許單個項目不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承夫元素的align-items屬性，如果沒有夫元素，則等同於stretch。除了auto，其他值和align-items屬性完全一樣。
<style> *{ margin: 0; padding: 0; } div{ border: 1px solid black; } .boxBig{ width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } .box1{ border: 1px solid red; width: 100px; height: 100px; } </style> </head> <body> <div class="boxBig"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> </div> </body>
