flex佈局

前言：由於面試中經常被問到flex佈局，今天就仔細學習一下

1. flex佈局原理

就是通過給父盒子新增flex屬性來控制子盒子的位置和排列方式

2. flex佈局父項常見屬性

2.1 flex-direction

預設主軸是從左到右

2.2 justify-content（設定主軸居中）

以下例子以預設主軸為準哦！
center（主軸居中對齊）

space-around

space-between

2.3 flex-wrap

• 不換行：元素裝不開的話會自動縮小子元素寬度，
• 換行：另起一行擺放子元素

2.4 align-items（設定側軸居中）

center（垂直居中）重點

2.5 align-content（多行，單行無效）

center

2.6 flex-flow（flex-direction和flex-wrap複合屬性）

3. align-content和align-items區別

4. flex佈局子項常見屬性

4.1 flex屬性（重點）

定義子專案分配剩餘空間，用flex來表示佔多少份數
舉個例子，定義3個span。第一，第三個span各佔1份，第二個span佔2份。

效果如圖，還可以自適應哦：

真的很方便佈局啊有木有！愛了愛了

4.2 align-self屬性（感覺不咋實用，就不詳細敘說了 233333）

以上圖片來自黑馬教程