Flex Container 中的子 Div 的宽度百分比不均匀

Posted 2023-03-05

【中文标题】Flex Container 中的子 Div 的宽度百分比不均匀

【英文标题】：Child Div's in Flex Container are uneven in % width

【发布时间】：2022-01-20 11:51:55

【问题描述】：

我在一个 flex 容器中有三个 DIV，它们需要以 40 像素的边距均匀地伸展，并随着屏幕宽度的缩小做出响应。当我开始缩小浏览器窗口的大小时，中间的 DIV 仍然比侧面的其他两个大。

当屏幕宽度缩小时，如何保持所有三个子 DIV 的宽度相同？

这是我的代码：

    .container 
    width: 100%;
    margin: auto;
    margin-bottom: 65px;
    display: flex;
    align-items: stretch;
    
    .child1, .child2, .child3 
    text-align: center;
    background-color: #F2F2F2;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 70px;
    padding-bottom: 60px;
    
    .container > * + * 
    margin-left: 40px;
    

    <div class="container">
        <div class="child1"> Child 1</div>
        <div class="child2"> Child 2</div>
        <div class="child3"> Child 3</div>
    </div>

这是一个屏幕截图。中间的 DIV 稍大：

【问题讨论】：

请添加html代码。

尝试在所有子类中添加flex:1;。

添加 flex:1 无效

【参考方案1】：

您要查找的属性是 flex-basis (docs)。

默认情况下，flex-basis 是基于内容的，看起来你的内容有不同的宽度。

在所有三个子 div 中指定相同的 flex-basis，以确保无论其内容如何，​​它们都保持相同的大小。