您的位置:首页技术文章
文章详情页

前端 - Flex布局中容器中项目的宽度设置问题?

【字号: 日期:2024-06-11 11:26:33浏览:28作者:猪猪
导读:问题描述问题的演示地址:点击这里想实现的布局是按照2:1:1的宽度排列,但是现在在第三个项目中如果增加了比较多的内容,这个项目的宽度就会随着内容的增加而增加,破坏了2:1:1的结构...

问题描述

问题的演示地址:点击这里

想实现的布局是按照2:1:1的宽度排列,但是现在在第三个项目中如果增加了比较多的内容,这个项目的宽度就会随着内容的增加而增加,破坏了2:1:1的结构。

我在这里看到使用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; }

但是我这样设置了并没有产生效果,期望的效果是这样的:前端 - Flex布局中容器中项目的宽度设置问题?

请问下该怎样实现?

问题解答

回答1:

shrink设为0

回答2:

width:0;完美解决

相关文章: