元素根据父级和兄弟级调整宽度

Question

我已经设置了父 div 和它的 3 个子 div。现在，第三个孩子被隐藏了。我已将第一个孩子的宽度设置为 20%，并希望第二个孩子在没有明确设置的情况下自动采用剩余的宽度。第三个孩子的宽度是 20%，当它被隐藏时，它应该占据父宽度的一部分，而第二个应该相应地重新调整其宽度。

<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray; display: inline-block; width: 20%;">
        div1
    </div>

    <div id="child2" style="background-color: blue; display: inline-block">
        div2
    </div>

    <div id="child2" style="background-color: violet; display: hidden; width: 20%;">
        div3
    </div>
</div>

Answer 1

这可以通过 flex 布局来实现。这是您的案例的代码片段：

#parent {
  display: flex;
  flex-direction: row;
}
#child1 {
  flex-basis: 20%;
}
#child2 {
  flex: 1;
}
#child3 {
  display: none;
}

<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray;">
        div1
    </div>

    <div id="child2" style="background-color: blue;">
        div2
    </div>

    <div id="child3" style="background-color: violet;">
        div3
    </div>
</div>

一些解释：

1. 使#parent显示为flex，为所有子元素启动 flex 布局。
2. Make flex-directionas row，使子元素水平显示。
3. Make#child2的flexas 1，这意味着它将缩小或扩展以占据#parent.

请注意，所有内联displayCSS 规则都已删除。一旦启用了 flex 布局，它们就不是必需的。