CSS中的flex布局有什么用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)CSS中的flex布局有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供BGP機(jī)房服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

flex布局又稱為彈性布局，任何一個(gè)容器都可以指定為flex布局

聲明彈性盒子的幾種方式

就像前面說的，所有容器都可以指定為flex布局

.box{    display:flex;}

行內(nèi)元素也可以使用：

display:inline-flex;

改變彈性元素的方向

彈性盒子默認(rèn)是從左到右的方向，此時(shí)的軸是水平方向的，flex-direction 默認(rèn)屬性為row

.box{    display:flex;}

可以通過修改flex-direction

屬性來改變排列方向，也就是把軸變?yōu)榇怪狈较?/p>

.box{    display:flex;    flex-deriction:column;}

還可以反轉(zhuǎn)，把屬性修改為column-reverse ,row-reverse

同理

控制彈性盒子溢出問題

如果盒子里面的元素特別多，水平寬度或者高度不夠時(shí)，默認(rèn)的情況是會(huì)縮小盒內(nèi)元素寬度

我們?cè)谶@里可以通過換行來解決

在盒子加上flex-wrap ，可以實(shí)現(xiàn)溢出部分往下?lián)Q行

同樣在wrap屬性后面加reverse，可以達(dá)到從下網(wǎng)上換行的效果

水平垂直的軸也是同理。

我們也可以通過flex-flow 同時(shí)設(shè)置軸的方向和是否換行

主軸與交叉軸

話不多說，直接看圖：

當(dāng)寬度不夠元素溢出導(dǎo)致?lián)Q行時(shí)，會(huì)有一個(gè)交叉軸：

當(dāng)屬性為flex-idrection:column 時(shí)，主軸為垂直方向，交叉軸與主軸垂直

主軸的排列方式

控制主軸的屬性為justify-content

下面以水平方向?yàn)槔?/strong>

一、整體靠一邊

默認(rèn)的方式是在主軸上從左到右，對(duì)齊到開始，也就是justify-content:flex-start

如果是對(duì)齊到結(jié)束，則是justify-content:flex-end

如果主軸反轉(zhuǎn)，從右到左，則開始在右邊，結(jié)束在左邊

二、整體居中：justify-content:center

三、左右靠邊，中間居中：justify-content:space-between

四、元素左右兩邊有相同間距：justify-content:space-around

五、平均分配：justify-content:space-evenly

 交叉軸的排列方式

控制交叉抽的屬性為align-centent

一、整體靠一邊

與主軸類似，flex-start 為交叉軸開始，flex-end 為交叉軸尾部

二、整體居中：align-content:center

三、交叉軸首尾靠邊，其他元素間隔平均分布：justify-content:space-between

四、交叉軸元素上下間距相同：justify-content:space-around

五、交叉軸元素間距平均：：justify-content:space-evenly

控制彈性盒子內(nèi)的單獨(dú)元素

一、align-self

通過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è)置他的寬高

彈性元素屬性組合寫法

flex-grow:1;
flex-shrink:2;
flex-basis:100px;

等同于

flex:1 2 100px;

感謝各位的閱讀！關(guān)于“CSS中的flex布局有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：CSS中的flex布局有什么用-創(chuàng)新互聯(lián)
URL標(biāo)題：http://muchs.cn/article16/dpeodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站收錄、服務(wù)器托管、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)