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