一、彈性布局
說明：a) 給元素設定了display:flex;後，就成為了彈性盒或者彈性布局
b) 當父元素設定了flex後，子元素的float，clear和vertical-align將會失效
c) 我們把設定display:flex;屬性的元素稱之為flex容器，把裡面的子元素稱之為flex專案
d) 當給元素設定了display:flex;後，會產生兩根軸線：主軸和交叉軸
♥二、flex容器屬性
1.設定主軸的方向
語法：flex-direction:row|row-reverse|column|column-reverse;
row 預設值，主軸在水平方向，起點在左端
row-reverse 主軸在水平方向，起點在右端
column 主軸在垂直方向，起點在上沿
column-reverse 主軸在垂直方向，起點在下沿
2.設定flex專案一行或多行顯示
語法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 預設值，不換行
wrap 換行
wrap-reverse 換行，但行的順序是倒過來的
3.flex-direction和flex-wrap簡寫方式
語法：flex-flow:row nowrap; (預設值)
4.設定主軸對齊方式
語法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 主軸在水平方向時，類似於左浮動
flex-end 主軸在水平方向時，類似於右浮動
center 居中對齊
space-between flex專案兩端對齊，中間間隔相等
space-around flex專案兩側間隔相等
5.設定交叉軸對齊方式
語法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 對齊交叉軸的起點
flex-end 對齊交叉軸的終點
center 以交叉軸為參考居中對齊
baseline flex專案第一行文字基線對齊
stretch flex專案沒有設定高度或者為auto，將佔滿整個父元素的高度
6.設定多根軸線對齊方式
語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 對齊交叉軸的起點
flex-end 對齊交叉軸的終點
center 以交叉軸為參考，居中對齊
space-between 交叉軸兩端對齊，軸線之間的間隔平均分布
space-around flex專案（沿交叉軸方向）之間的間隔相等
stretch flex沒有設定高度或者為auto，將均分父元素的高度
♥三、 flex專案屬性
1.設定flex專案排列順序
語法：order:整數值;
注：值越小越靠前
2.設定某個flex專案不同於其他flex專案的交叉軸對齊方式
語法：align-self:flex-start|flex-end|center|baseline|stretch;
3.設定flex專案放大比例
語法：flex-grow:0|1|數值;
注：當父元素存在剩餘空間，flex專案也不放大，即flex-grow預設值為0
4.設定flex專案縮小比例
語法：flex-shrink:1|0|數值;
注：flex-shrink預設值為1，即當父元素空間不足時，flex專案等比例縮小
flex-shrink:0;表示即使父元素空間不足，flex專案也不縮小
5.在分配剩餘空間之前，設定flex專案佔據主軸的空間
語法：flex-basis:auto|百分比|數值+單位;
6.flex-grow,flex-shrink和flex-basis的簡寫方式
語法：flex:0 1 auto; (預設值)
注：flex:1; 完整寫法為： flex:1 1 0%;
應用1：flex專案等比例分配空間
應用2：分配剩餘空間給某個flex專案
移動端flex彈性布局容器常用屬性
下列屬性用於設定容器，也就是父盒子 在flex布局中，分為主軸和側軸。預設情況下，水平方形為主軸，水平向右，垂直方向為側軸，垂直向下。flex direction屬性可以改變預設的主軸設定 body div span 1.設定水平方向為主軸，專案從左向右排列 flex direction row 設...
Flex彈性布局基礎屬性
彈性布局可以簡潔 完整 響應式的實現各種頁面布局。螢幕和瀏覽器視窗大小變化也可以靈活調整布局 指定伸縮元素沿著主軸或者側軸，按照一定比例分配額外的空間，調整伸縮元素的大小 指定伸縮元素沿著主軸或者側軸，把伸縮元素額外空間分配到伸縮元素之前 之後和之間 控制元素在頁面上的布局方向 指定如何將垂直於元素...
Flex 布局 容器屬性
flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...