如何在 flex 布局中混合宽度和百分比（左/右）？答案

【问题标题】：How do I mix width and percentage(left/right) in flex layout?如何在 flex 布局中混合宽度和百分比（左/右）？
【发布时间】：2019-10-26 12:08:00
【问题描述】：

我有 3 个积木，我需要：

第一个块需要 200 像素宽并触及左侧。
第二个块就在第一个块之后，其右边缘正好是其容器宽度的 50%
第三块只是接管剩下的空间。

我在一些游戏引擎中做了类似的事情：

但是如何用 css 实现呢？

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

我试过了，但它不起作用:(

* {
  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>

【问题讨论】：

jsbin.com/gocelehuxi/1/edit?html,css,output

标签： html css flexbox responsive

【解决方案1】：

试试这个

    * {
      box-sizing: border-box;
    }

   body{
      display: flex;
      flex-direction: row;
   }

    .wrapper, .wrapper-1 {
      width: 50%;
      display: flex;
      position: relative;
    }

    .wrapper > *, .wrapper-1 > * {
      height: 300px;
      margin: 0;
      display: inline;
      white-space: nowrap;
    }

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

    .wrapper-1 > *:nth-child(1) {
      background-color: violet;
      flex: 1 1 auto;
    }

    .wrapper > *:nth-child(2) {
      background-color: khaki;
      flex: 1 1 auto;
    }

    .wrapper > *:nth-child(3) {
      background-color: violet;
     flex: 1 auto;
    }

<body>
<div class="wrapper">
  <pre> flex-basis: 200px;
  </pre>
  <pre> flex: 1 1 auto;
  </pre>
  
</div>
<div class="wrapper-1">
    <pre>flex: 1 1 auto;  </pre>
</div>
</body>

【讨论】：

不是我想要的...第一个和第二个块加起来应该是 50% 宽：/
@HaoWu 做了一些改动。需要将页面拆分为两个包装器。两者都包含 50% 的宽度。现在您可以按照自己喜欢的方式处理内容了 :)

【解决方案2】：

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

现在允许 第二个孩子 占据其他两个元素留下的剩余空间，您可以设置 flex-grow: 1 和设置 min-width: 0（允许它进一步缩小到超出其固有宽度 - 注意默认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>

【讨论】：

哇，调整中间元素而不是第三个元素非常有意义......还有一件事我不太清楚，flex: 0 0 200px 和 @987654329 之间有什么区别@ ?
Nvm 我在这里找到它：stackoverflow.com/questions/34352140/…，感谢您的帮助:)