一. flex 布局原理
flex 是flexible box 的縮寫，意為"彈性布局", 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。
原理總結：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式
二. flex 布局父項常見屬性
以下六個屬性是對父元素設定的，首先給父級新增flex屬性：display：flex；
1 . flex-direction ：設定主軸的方向
預設的主軸是 x 軸，寫作 row（行），y 軸就是側軸，元素是跟著主軸的方向排列的
.div屬性值：
2 . justify-content ：設定主軸上子元素的排列方式
.div屬性值有五個，具體對齊方式與軸的方向有關。使用這個屬性之前一定要確定好主軸是哪個。下面假設主軸為從左到右。
3 . flex-wrap ：設定子元素是否換行
預設情況下，專案都排在一條線上（又稱"軸線"），flex-wrap屬性定義，flex布局中預設是不換行的，如果裝不下，會縮小子元素的寬度，放到父元素裡面
.div屬性值：
4 . align-items ：設定側軸上的子元素排列方式（單行）（與2相對）
該屬性是控制子項在側軸上的排列方式，適合子項為單項的時候使用
設定居中：
.div屬性值有六個
6 . flex-flow ：復合屬性，相當於同時設定了 flex-direction 和 flex-wrap
把設定 主軸方向 和 是否換行 簡寫：例如
.div三.flex 布局子項常見屬性
常見有三個屬性：
flex 屬性：flex屬性定義子專案分配剩餘空間，用flex來表示佔多少份數
.item例如三個子項，讓兩端的靠邊，中間的自適，並會隨著頁面大小而改變大小
.div
section div: nth-child(1)
section div: nth-child(2)
section div: nth-child(3)
讓三個子項平均分布,只需要一句話，就會平分成三份
.p要讓中間的子項佔其中兩份，並且比例不會隨著頁面大小改變而改變
p span
p span: nth-child(2)
2. align-self 屬性：控制某乙個子項自己在 側軸 上的排列方式
該屬性值允許單個專案與其他專案不一樣的對齊方式，可覆蓋 align-items屬性，預設值為auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch
.item設定第二個子項在側軸上的排列方式，從側軸末端開始：
div span:nth-child(2)3. order 屬性定義專案的排序順序（先後順序）
數值越小，排列越靠前，預設值為0
注意：和z-index 不一樣
div span:nth-child(2)flex布局筆記
flex基本術語 display 定義乙個父容器，設定 display flex inline flex flex direction 設定主軸方向 預設橫軸 設定 row row reverse column column reverse flex wrap 設定容器子元素是否換行 預設不換行 設...
flex布局筆記
父容器配置display flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個 1 flex direction 這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性 column 從上到下 row 從左到右 column reverse 從下到上 row reverse 從右到...
Flex布局筆記
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex direction屬性值 屬...