html - 动态占用空间并使宽度相等

Question

如何在不修改 HTML dom 的情况下显示预期结果。

两个页面都将显示page 1 布局。但是，在 HTML2 2 上，child2 的内容为空。

我期望的是 HTML2 应该显示页面 2 布局。

是否可以仅通过 CSS 实现此目的。谢谢

预期结果

HTML 1

    <div name="parent">
       <div name="child1">SOMETHING_INSIDE</div>
       <div name="child2">SOMETHING_INSIDE</div>
    </div>

HTML 2

    <div name="parent">
       <div name="child1">SOMETHING_INSIDE</div>
       <div name="child2"></div>
    </div>

CSS 规则

    div[name="parent"] {
        display: flex;
        div {
            display: flex;
            flex-grow: 1;
        }
    }

Answer 1

使用flex-grow: 1，并且由于flex-basis默认为auto，可用空间在它们的内容已被撤回，这仅仅意味着即使是一个空的 flex 元素也会占用空间，除非 child1 中的内容大到足以容纳所有内容，如本例所示:

div[name="parent"] {
  display: flex;
}

div[name="parent"] div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

Page 2
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2"></div>
</div>

<br><br>

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE
  </div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

Page 2
<div name="parent">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE
  </div>
  <div name="child2"></div>
</div>

---

在这种情况下，您可以使用 :empty 选择器并将空的选择器设置为 display: none

div[name="parent"] {
  display: flex;
}

div[name="parent"] div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

div[name="parent"] div:empty {
  display: none;
}

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

<br> Page 2
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2"></div>
</div>

---

如果您还想确保，当两者都有内容时，它们总是等宽 (50%/50%)，您可以将 flex-basis 设置为 0

div[name="parent"] {
  display: flex;
}

div[name="parent"] div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

.equal-width div {
  flex-basis: 0;
}

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

<br> Page 2
<div name="parent" class="equal-width">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>