採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex 專案（flex item），簡稱"專案"。
總結flex布局原理：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式
flex-direction屬性值
屬性值說明
r ow
\color
row預設從
左到右\color
預設從左到右
row-reverse
從右到左
c ol
umn\color
column
從 上到
下\color
從上到下
column-reverse
從下到上
justify-content屬性值
屬性值說明
f le
x−st
art\color
flex−s
tart
默 認值
從頭部開
始如果主
軸是x軸
，則從左
到右\color
預設值從頭部
開始如果
主軸是x
軸，則從
左到右flex-end
從尾部開始排列
c en
ter\color
center
在 主軸
居中對齊
（如果主
軸是x軸
則水平居
中)\color
在主軸居中對
齊（如果
主軸是x
軸則水平
居中)spa
ce−a
roun
d\color
space−
arou
nd平 分剩
餘空間\color
平分剩餘空間
s pa
ce−b
etwe
en\color
space−
betw
een先兩邊
貼邊再平
分剩餘空
間（重要
）\color
先兩邊貼邊再
平分剩餘
空間（重
要）flex-wrap設定是否換行
align-items 設定側軸上的子元素排列方式（單行 ）
align-content 設定側軸上的子元素的排列方式（多行）
align-content 和align-items區別flex屬性
flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
align-self控制子項自己在側軸上的排列方式
align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。
預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
order 屬性定義專案的排列順序
數值越小，排列越靠前，預設為0。
注意：和 z-index 不一樣。
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 布局筆記
1，今天遇到乙個問題，就是當元素布局設定為了flex後，裡面的內容只有文字，但是對text align 屬性設定無效，仔細想了下，是因為把display 設定為了flex後，flex將裡面的文字也認為是乙個子元素 其實就是子元素。只不過是文字節點而已 子元素布局可以通過align items 設定y...