文章詳情頁(yè)
前端 - Flex布局中容器中項(xiàng)目的寬度設(shè)置問(wèn)題?
瀏覽:178日期:2024-06-11 11:26:33
問(wèn)題描述
問(wèn)題的演示地址:點(diǎn)擊這里
想實(shí)現(xiàn)的布局是按照2:1:1的寬度排列,但是現(xiàn)在在第三個(gè)項(xiàng)目中如果增加了比較多的內(nèi)容,這個(gè)項(xiàng)目的寬度就會(huì)隨著內(nèi)容的增加而增加,破壞了2:1:1的結(jié)構(gòu)。
我在這里看到使用flex-basis:0的方式:
.column {margin: 10px;flex-grow: 1;flex-shrink: 1;flex-basis: 0; } .column:first-of-type {flex-grow: 2;flex-shrink: 2;flex-basis: 0; }
但是我這樣設(shè)置了并沒(méi)有產(chǎn)生效果,期望的效果是這樣的:
請(qǐng)問(wèn)下該怎樣實(shí)現(xiàn)?
問(wèn)題解答
回答1:shrink設(shè)為0
回答2:width:0;完美解決
相關(guān)文章:
1. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””2. docker - 如何修改運(yùn)行中容器的配置3. docker鏡像push報(bào)錯(cuò)4. 關(guān)于docker下的nginx壓力測(cè)試5. angular.js - angularjs的自定義過(guò)濾器如何給文字加顏色?6. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題7. 前端 - @media query 使用出現(xiàn)的問(wèn)題?8. html5和Flash對(duì)抗是什么情況?9. java - 如何點(diǎn)擊按鈕,重新運(yùn)行(我是初學(xué)者)?10. html - css氣泡,實(shí)現(xiàn)“倒三角(不知道算不算三角了)”可透明的。
排行榜

熱門(mén)標(biāo)簽
網(wǎng)公網(wǎng)安備