Question

我正在尝试使两个flex元素收缩和增长，而其子div元素之一具有预定义的最小和最大宽度。

如果我有太多可用空间，我希望两个元素彼此相邻显示，而元素或内部div的增长不超过最大宽度。

如果我没有足够的可用空间，我希望我的两个内部div保持它们的最小宽度和flex元素被包装。

我的最佳尝试是：

.bigcontainer {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}

.a {
  flex: 0 0 auto;
}

.b {
  flex: 0 1 400px;
}

.c {
  flex: 1 0 auto;
}

.sizedContent {
  background-color: lightcoral;
  height: 15px;
  min-width: 200px;
}

<div class="bigcontainer">
  <div class="container">
    <div class="a">
      a
    </div>
    <div class="b">
      <div class="sizedContent">
      </div>
    </div>
    <div class="c">
      c
    </div>
  </div>

  <div class="container">
    <div class="a">
      a
    </div>
    <div class="b">
      <div class="sizedContent">
      </div>
    </div>
    <div class="c">
      c
    </div>
  </div>
</div>

Codepen pen。

内部div随我的需要而增长和缩小。但是，由于flex元素也在增长，因此两者之间会有多余的空白。

有人有更好的主意如何实现这一目标吗？

Answer 1

要删除flex元素之间的空间，请从display: flex切换到display: inline-flex。

revised codepen

.bigcontainer {
  display: inline-flex; /* adjustment */
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}

.a {
  flex: 0 0 auto;
}

.b {
  flex: 0 1 400px;
}

.c {
  flex: 1 0 auto;
}

.sizedContent {
  background-color: lightcoral;
  height: 15px;
  min-width: 200px;
}

<div class="bigcontainer">
  <div class="container">
    <div class="a">a</div>
    <div class="b">
      <div class="sizedContent"></div>
    </div>
    <div class="c">c</div>
  </div>
  <div class="container">
    <div class="a">a</div>
    <div class="b">
      <div class="sizedContent"></div>
    </div>
    <div class="c">c</div>
  </div>
</div>

如何使flex元素在两个预定义宽度之间增长和收缩？

1 个答案: