簡說Flex

前言：學習css最好仍是去控制檯去調試屬性，它會自動提示屬性名和屬性值,去jsbin把每一個屬性和屬性值都去試一遍

1、看上去不少，只要記住2點

flex會將頁面分割成不少項

1.flex裏面的不少項叫flex item

2.包裹不少項的容器叫flex container

2、 container的6個屬性

1.flex-direction

2.默認是不換行的

flex-wrap

3.flex-flow是上面2個的簡寫，能夠無論

4.justify-content

5.align-items

6.align-content: 用的少不用記,用來控制行與行之間的間距（一般認爲的平均方案就是align-content: stretch;）

總結：

container屬性只須要記住4個屬性：方向、換行。主軸對齊、側軸對齊

2、 item的6個屬性

1.flex-grow

栗子：它的意思就是3個div能夠「增加」，增加的總共大小是3個daiv周圍剩餘的空間，增加的比例是1:2:1，有點像分蛋糕

div.child:nth-child(2){flex-grow:1;}
div.child:nth-child(3){flex-grow:2;}
div.child:nth-child(1){flex-grow:1;}
複製代碼

2.flex-shrink

3.flex-basis

4.flex 上面三個的縮寫

5.order

6.align-self：任性，本身管本身

總結：

item屬性只須要記住4個屬性：增加、收縮、順序、自身對齊

3、來吧！flex佈局

1.手機頁面佈局

2.產品列表

3.PC頁面佈局

4.完美居中

4、more...

能夠嘗試用flex作出下面全部的佈局類型：