html - 如何在 flex 布局中混合宽度和百分比(左/右)？

Question

我有 3 个 block ，我需要:

• 第一个 block 需要 200 像素宽并触及左侧。
• 第二个 block 紧跟在第一个 block 之后，它的右边缘刚好在其容器宽度的 50% 处
• 第三 block 只是接管剩余的空间。

我在一些游戏引擎中做了类似的东西:

但是我怎样才能用css实现呢？

我不想嵌套内部 div，因为它们扮演着相同的 Angular 色。

---

我试过了，但是没用:(

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.wrapper > * {
  height: 300px;
  display block;
}

.wrapper > *:nth-child(1) {
  background-color: salmon;
  width: 200px;
}

.wrapper > *:nth-child(2) {
  background-color: khaki;
  right: 50%;
}

.wrapper > *:nth-child(3) {
  background-color: violet;
  width: 50%;
}

<div class="wrapper">
  <pre>
    left: 0;
    width: 200px;
  </pre>
  <pre>
    left: 200px;
    right: 50%;
  </pre>
  <pre>
    left: 50%;
    right: 0;
  </pre>
</div>

Answer 1

您可以将 flex: 0 0 50% 设置为第三个​​ child ，这意味着该元素不会增长、收缩并始终占据flexbox 容器宽度的一半。

现在要让第二个 child 占据其他两个元素留下的剩余空间，您可以设置flex-grow: 1 并设置min-width : 0(允许它比其固有宽度进一步缩小 - 请注意，对于 flex 元素，默认 min-width 是自动的)。

请看下面的演示:

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.wrapper > * {
  height: 300px;
  display: block;
}

.wrapper > *:nth-child(1) {
  background-color: salmon;
  width: 200px;
}

.wrapper > *:nth-child(2) {
  background-color: khaki;
  flex-grow: 1; /* grow width automatically if needed */
  min-width: 0; /* allow shrinking below default width */
}

.wrapper > *:nth-child(3) {
  background-color: violet;
  flex: 0 0 50%; /* added */
}

<div class="wrapper">
  <pre>
    left: 0;
    width: 200px;
  </pre>
  <pre>
    left: 200px;
    right: 50%;
  </pre>
  <pre>
    left: 50%;
    right: 0;
  </pre>
</div>