您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)CSS中的flex布局有什么用的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
flex布局又稱為彈性布局,任何一個(gè)容器都可以指定為flex布局
聲明彈性盒子的幾種方式
就像前面說(shuō)的,所有容器都可以指定為flex布局
.box{ display:flex;}
行內(nèi)元素也可以使用:
display:inline-flex;
改變彈性元素的方向
彈性盒子默認(rèn)是從左到右的方向,此時(shí)的軸是水平方向的, flex-direction
默認(rèn)屬性為 row
.box{ display:flex;}
可以通過(guò)修改 flex-direction
屬性來(lái)改變排列方向,也就是把軸變?yōu)榇怪狈较?/p>
.box{ display:flex; flex-deriction:column;}
還可以反轉(zhuǎn),把屬性修改為 column-reverse
, row-reverse
同理
控制彈性盒子溢出問(wèn)題
如果盒子里面的元素特別多,水平寬度或者高度不夠時(shí),默認(rèn)的情況是會(huì)縮小盒內(nèi)元素寬度
我們?cè)谶@里可以通過(guò)換行來(lái)解決
在盒子加上 flex-wrap
,可以實(shí)現(xiàn)溢出部分往下?lián)Q行
同樣在wrap屬性后面加reverse,可以達(dá)到從下網(wǎng)上換行的效果
水平垂直的軸也是同理。
我們也可以通過(guò) flex-flow
同時(shí)設(shè)置軸的方向和是否換行
主軸與交叉軸
話不多說(shuō),直接看圖:
當(dāng)寬度不夠元素溢出導(dǎo)致?lián)Q行時(shí),會(huì)有一個(gè)交叉軸:
當(dāng)屬性為 flex-idrection:column
時(shí),主軸為垂直方向,交叉軸與主軸垂直
主軸的排列方式
控制主軸的屬性為 justify-content
下面以水平方向?yàn)槔?/strong>
一、整體靠一邊
默認(rèn)的方式是在主軸上從左到右,對(duì)齊到開(kāi)始,也就是 justify-content:flex-start
如果是對(duì)齊到結(jié)束,則是 justify-content:flex-end
如果主軸反轉(zhuǎn),從右到左,則開(kāi)始在右邊,結(jié)束在左邊
二、整體居中:justify-content:center
三、左右靠邊,中間居中:justify-content:space-between
四、元素左右兩邊有相同間距:justify-content:space-around
五、平均分配:justify-content:space-evenly
交叉軸的排列方式
控制交叉抽的屬性為 align-centent
一、整體靠一邊
與主軸類似, flex-start
為交叉軸開(kāi)始, flex-end
為交叉軸尾部
二、整體居中:align-content:center
三、交叉軸首尾靠邊,其他元素間隔平均分布:justify-content:space-between
四、交叉軸元素上下間距相同:justify-content:space-around
五、交叉軸元素間距平均::justify-content:space-evenly
控制彈性盒子內(nèi)的單獨(dú)元素
一、align-self
通過(guò) align-self
屬性,可以控制單獨(dú)元素,類似于對(duì)主軸整體的控制
二、元素可用空間分配:flex-grow
flex-grow
屬性指子元素分配到父級(jí)盒子的占比
如都是1的時(shí)候:
也可以是其他占比,如果為0則為原大小
元素動(dòng)態(tài)縮小
元素動(dòng)態(tài)縮小使用 flex-shrink
屬性控制。當(dāng)你內(nèi)部元素總寬度大于外部元素寬度,又不適用 wrap
讓其換行,則可以使用flex-shrink控制內(nèi)部元素縮放。
0表示不縮放,數(shù)值越大,縮小成都越大
主軸的基準(zhǔn)尺寸flex-basis
設(shè)置盒子內(nèi)部元素的基準(zhǔn)尺寸 flex-basis
,優(yōu)先級(jí)大于css設(shè)置他的寬高
彈性元素屬性組合寫(xiě)法
flex-grow:1; flex-shrink:2; flex-basis:100px;
等同于
flex:1 2 100px;
感謝各位的閱讀!關(guān)于“CSS中的flex布局有什么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。