使用CSS和Flex定位div

Question

所以我试图简单地布局一些div，并使某些内容具有固定的宽度和其他可重排的内容。

例如，上面的图像显示了最小宽度的配置。下图显示了放大窗口时应该发生的情况。实际上，大多数项目都向右或向左移动，但只有一个输入打算放大。

| min(FromPosition), pct(FromPosition, 25), pct(FromPosition, 50), pct(FromPosition, 75), max(FromPosition) by _timeslice

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
}

Answer 1

第二张图片显示了关于flex的工作原理的误解。 Flex拉伸以填充容器。因此，第二张图像是不可能的。

第二个图像中的第一行看起来像一个浮动布局。要在flex中实现相同的效果，您需要添加一个额外的空元素，该元素将填补空白，但没有可见的内容。

<div class="flex-container">
   <div style="flex-grow: 1">
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <!-- Adding a "spacer" solves the issue -->
         <div style="flex-grow: 1;"></div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
      </div>
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0">Some label</div>
         <div style="flex-grow: 1;">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0">Btn</div>
      </div>
   </div>
   <div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>