一、彈性佈局
說明：
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項目
作者：路人甲小碼
來源：CSDN
原文：https://blog.csdn.net/weixin_44111864/article/details/89048636
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！