css3中flex布局寬度不生效的解決

兩列布局項(xiàng)目中經(jīng)常會(huì)用到,很多種方法可以做這樣的效果
但是最方便的還是要屬flex了,給外層父元素設(shè)置display:flex;然后子元素,寬度自適應(yīng)的那個(gè)設(shè)置
flex-grow:1;,另外一個(gè)設(shè)置固定寬度就可以做到,一個(gè)固定另一個(gè)自適應(yīng)了。
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex 寬度不生效</title> </head> <body> <style> /* 重置樣式 */ * { margin: 0px; padding: 0px; } /* 設(shè)置外層display為flex */ .box { display: flex; height: 100px; width: 100%; } /* 左邊自適應(yīng) */ .box .left { flex-grow: 1; background: red; } /* 右邊固定 */ .box .right { width: 200px; background: yellow; } </style> <!-- 外層盒子 --> <div class="box"> <!-- 左側(cè) --> <div class="left"></div> <!-- 右側(cè) --> <div class="right"></div> </div> </body> </html>
這段代碼的運(yùn)行結(jié)果就是上面截圖那樣,但是這個(gè)代碼有一個(gè)小小的bug,那就是當(dāng)我們左邊(自適應(yīng)那邊)內(nèi)部如果有內(nèi)容,并且內(nèi)容的寬度超過了left的寬度的時(shí)候,就會(huì)把右邊(固定寬度)擠小,你會(huì)發(fā)現(xiàn)你給的固定寬度(例子中的200px)不生效了,或者出現(xiàn)滾動(dòng)條。
我們?cè)谧筮吋右稽c(diǎn)內(nèi)容,并且讓他超出寬度。
/* 超出的內(nèi)容 樣式 */ .box .left .content { width: 1000px; }
<!-- 左側(cè) --> <div class="left"> <!-- 超出的內(nèi)容 --> <div class="content"></div> </div>
運(yùn)行結(jié)果:
內(nèi)容超出,并出現(xiàn)了滾動(dòng)條。這個(gè)問題很好解決,只需要在left上面加上溢出隱藏的屬性,就可以了。
/* 左邊自適應(yīng) */ .box .left { flex-grow: 1; background: red; overflow: hidden; }
但是問題又來了,右邊出來了,可是它的寬度變小了,不足200了。
這個(gè)問題呢,其實(shí)也很容易,給右邊的div(right)加上min-width:200px;就完美了。
/* 右邊固定 */ .box .right { width: 200px; min-width: 200px; background: yellow; }
這樣不管你,什么屏幕,或者怎么拖放都能完美兼容了。。。
到此這篇關(guān)于css3中flex布局寬度不生效的解決的文章就介紹到這了,更多相關(guān)flex布局寬度不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css3彈性盒子flex實(shí)現(xiàn)三欄布局的實(shí)現(xiàn)
這篇文章主要介紹了css3彈性盒子flex實(shí)現(xiàn)三欄布局的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-11-12使用flex布局輕松實(shí)現(xiàn)頁(yè)面布局的示例代碼
這篇文章主要介紹了使用flex布局輕松實(shí)現(xiàn)頁(yè)面布局的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來2020-10-14- Flex 是 Flexible Box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。這篇文章給大家介紹flex布局語(yǔ)法的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2020-08-26
使用Flex布局實(shí)現(xiàn)頭部固定內(nèi)容區(qū)域滾動(dòng)的方法
這篇文章主要介紹了使用Flex布局實(shí)現(xiàn)頭部固定內(nèi)容區(qū)域滾動(dòng)的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小2020-08-04- 這篇文章主要介紹了詳解flex布局下圖片變形的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-08-04
Flex布局讓子項(xiàng)保持自身高度的實(shí)現(xiàn)
這篇文章主要介紹了Flex布局讓子項(xiàng)保持自身高度的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-08-03css3 flex布局實(shí)現(xiàn)平均分配元素的示例代碼
這篇文章主要介紹了css3 flex布局實(shí)現(xiàn)平均分配元素的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2020-07-21flex布局實(shí)現(xiàn)上下固定中間滑動(dòng)的布局方式
這篇文章主要介紹了flex布局實(shí)現(xiàn)上下固定中間滑動(dòng)的布局方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來2020-07-21- flex布局(flex是flexible box的縮寫), 也稱為彈性盒模型 ,這篇文章主要介紹了CSS3新增布局之: flex的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或2020-06-18
flex布局實(shí)現(xiàn)每行固定數(shù)量+自適應(yīng)布局
這篇文章主要介紹了flex布局實(shí)現(xiàn)每行固定數(shù)量+自適應(yīng)布局,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一2020-06-17