詳解CSS中的flex布局
我要評(píng)論flex布局又稱(chēng)為彈性布局，任何一個(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
一、整體靠一邊
與主軸類(lèi)似， 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ú)元素，類(lèi)似于對(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;
總結(jié)
到此這篇關(guān)于詳解CSS中的flex布局的文章就介紹到這了,更多相關(guān)CSS flex布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
Flexbox布局模塊旨在提供一個(gè)更有效的方式，在一個(gè)容器里面去布局分配空間。這篇文章給大家介紹CSS3中的Flex布局，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或2020-04-27
CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-03
css之display屬性之inline-block布局實(shí)現(xiàn)詳解
今天學(xué)習(xí)css樣式的時(shí)候發(fā)現(xiàn)很多網(wǎng)站都是用css的display:inline-block這個(gè)屬性，這里剛好有篇特別好的解釋?zhuān)胤窒硪幌?/div> 2020-03-21
css用Flex布局制作簡(jiǎn)易柱狀圖的實(shí)現(xiàn)
這篇文章主要介紹了css用Flex布局制作簡(jiǎn)易柱狀圖的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-03-17
使用CSS和Java來(lái)構(gòu)建管理儀表盤(pán)布局的實(shí)例代碼
這篇文章主要介紹了使用CSS和Java來(lái)構(gòu)建管理儀表盤(pán)布局的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考2020-06-24最新評(píng)論
