問題描述

問題的演示地址：點(diǎn)擊這里

想實(shí)現(xiàn)的布局是按照2:1:1的寬度排列，但是現(xiàn)在在第三個項(xiàng)目中如果增加了比較多的內(nèi)容，這個項(xiàng)目的寬度就會隨著內(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è)置了并沒有產(chǎn)生效果，期望的效果是這樣的：

請問下該怎樣實(shí)現(xiàn)？

問題解答

shrink設(shè)為0

width:0;完美解決