Question

我有3个区块，我需要：

第一个区块的宽度必须为200px，然后触摸左侧。
第二个块紧接在第一个块之后，其右边缘正好位于其容器的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>

Answer 1

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

现在要允许第二个孩子占据其他两个元素剩余的剩余空间，可以设置flex-grow: 1和set 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>

Answer 2

尝试一下

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

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

2 个答案: