給容器設(shè)置
任何容器都設(shè)置 inline-flex 場景幾乎沒有 (行級(jí))
子元素 浮動(dòng)
display : flex; 使其變成彈性和模型
flex-direction 定義彈性盒模型的主軸方向
row 默認(rèn) 主軸X方向
row-reverse 定義主軸為X 從右向左排列
column 改變主軸方向?yàn)樨Q直 順序從上到下
column-reverse 改變主軸方向?yàn)樨Q直 豎直方向從下到上怕列
justify-content 定義對(duì)齊
flex-start 默認(rèn)值 從主軸的啟示對(duì)齊
flex-end 從主軸的末尾對(duì)齊
flex-center 中間對(duì)齊
space-between 定義元素平均分配在主軸上 第一個(gè)在開始最后一個(gè)在末尾 其他均勻分布
space-around 定義內(nèi)容元素平均分配在主軸上 兩側(cè)的間距是中間的一半
flex-warp
no-warp 默認(rèn)值 不換行
warp 在開始的地方開始 一行放不下自動(dòng)換行
warp-reserve 在結(jié)束的地方開始
align-items 定義元素交叉軸上的位置
stretch 不設(shè)置交叉軸方向的長度是自動(dòng)鋪滿交叉軸
baseline 以文字的基線對(duì)齊
align-content 交叉抽多行控制方式
屬性值和justify-content一樣
flex-flow 檀夹;兩個(gè)值 是flex-direction:蜡峰;和 flex-warp:用爪;的縮寫 兩個(gè)屬性之間用空格
以上是伸縮容器設(shè)置的屬性
伸縮項(xiàng)設(shè)置的屬性
order:餐塘; 順序
誰的數(shù)值大誰在后邊默認(rèn)值是0;可以用負(fù)數(shù)讓一個(gè)元素快速的提升到前面
flex-grow :;伸縮項(xiàng)目的放大比例 默認(rèn)值是0 存在剩余空間也不放大 值為一的時(shí)候自適應(yīng) 平均分配剩余空間
如果想提高某一個(gè)元素的大小,可通過改變其權(quán)重來改變(權(quán)重即數(shù)值大屑敲摇)
flex-shrink : ; 伸縮項(xiàng)的縮小比例 默認(rèn)值是 1 伸縮項(xiàng)的大于容器的時(shí)候 所有伸縮項(xiàng)共同縮小相同的尺寸達(dá)到自適應(yīng)效果 如果想打破平衡也可以通過改變權(quán)重 權(quán)重越大縮小比例越大
值為0的時(shí)候會(huì)撐破容器
flex-basis 項(xiàng)目占據(jù)主軸空間 默認(rèn)值是auto (由內(nèi)容撐開)
flex :团驱;三個(gè)屬性的集合(flex-grow flex-shrink flex-basic)
默認(rèn)值 flex:0 1 auto摸吠;
align-self:;允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式嚎花,可覆蓋align-items屬性寸痢。默認(rèn)值為auto,表示繼承父元素的align-items屬性紊选,如果沒有父元素啼止,則等同于stretch。
標(biāo)注:可以給容器設(shè)置padding兵罢,也可以給元素設(shè)置margin調(diào)整一行中元素的個(gè)數(shù)