常見父項屬性
1、flex-direction 設定主軸方向，預設為x軸
屬性值：
row 從左到右，x軸(預設)
row-reverse 從右到左
column 從上到下
column-reverse 從下到上
2、justify-content 設定主軸上的子元素排列方式
屬性值：
flex-start 從主軸頭部開始，如果主軸是x軸，則從左到右，如果是y軸，則從上到下(預設)
flex-end 從主軸尾部開始
center 主軸居中對齊
space-around 平均分配主軸剩餘空間
space-between 先兩邊貼邊，再平均分配主軸剩餘空間
3、flex-wrap 設定是否換行，預設不換行
屬性值：
nowrap 不換行(預設)
wrap 自動換行
4、align-items 設定側軸上的子元素排列方式(單行)
屬性值：
flex-start 從側軸頭部開始，如果主軸是x軸，則從左到右，如果是y軸，則從上到下(預設)
flex-end 從側軸尾部開始
center 側軸居中對齊
stretch 沿側軸拉伸
5、align-content 設定側軸上的子元素排列方式(多行)
屬性值：
flex-start 從側軸頭部開始，如果側軸是x軸，則從左到右，如果是y軸，則從上到下(預設)
flex-end 從側軸尾部開始
center 側軸居中對齊
space-around 平均分配側軸剩餘空間
space-between 先兩邊貼邊，再平均分配側軸剩餘空間
stretch 沿側軸拉伸
6、flex-flow flex-direction和flex-wrap的簡寫
flex-flow： column wrap
常見子項屬性
1、flex 定義子專案分配剩餘空間，用flex來表示佔多少份，預設0
2、align-self 控制子項自己在側軸上的排列方式
3、order 定義排列順序，數字越小越靠前，預設0
設定側軸上子元素排列方式 flex布局
flex布局優缺點 布局簡單，移動端使用較廣 pc端支援較差，ie11或更低版本不支援 flex布局原理 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。當我們為父盒子設為 flex 布局以後，子元素的 flo...
設定側軸上子元素排列方式 移動端常見布局
6.1流式布局 百分比布局 流式布局就是百分比布局，也稱非固定畫素布局。通過盒子寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素限制，內容向兩側填充。流式布局方式是移動web開發使用的比較常見的布局方式 max width 最大寬度 max height 最大高度 min width 最小寬...
子元素上的margin作用到了父元素上
margin外邊距合併詳解 以上 的初衷是讓子元素的頂部距離父元素30px，但是事實上卻並沒有實現預 期的效果，而是子元素頂部緊貼父元素，並且margin top好像轉移給了父元素，讓父元素產生上外邊距。這其實是乙個典型的外邊距合併問題，但是並非 所有的瀏覽器都會產生這種情況，一般標準瀏覽器都會出現...