无论列数或列内容如何，​​均等宽度的flexbox行

Question

我试图通过flexbox创建三行，其中包含可变数量的列（顶部和底部行将在QTY中匹配）和一个只有一列的中间列。

由于列数是可变的，因此父节点上没有设置宽度。

我正在努力让中间列的宽度与顶行和底行的宽度相匹配。

// Trace serve response
    clientBuilder.interceptors().add(chain -> {
        Request request = chain.request();
        Response response = chain.proceed(request);
        Log.i("ServerResponse: ", response.body().string());
        return chain.proceed(request);
    });

section {
  margin: 0 auto;
  display: flex;
}

.col {
  width: 100px;
  height: 100px;
  border-color: #000;
  border-style: solid;
  border-width: 1px 0px 1px 1px;
}

.col:last-child {
  border-right: 1px solid #000;
}

.middle {
  height: 100px;
  width: inherit;
  border-color: #000;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
}

https://jsfiddle.net/o5xLuq51/

Answer 1

将这些元素的整个容器（在本例中恰好是body元素）设置为具有列方向的内联级Flex容器。

这将创建一个宽度由最长行设置的列。

由于弹性项目的初始设置为align-self: stretch，因此所有未定义宽度的行都会扩展容器的整个宽度（more details）。

然后，要让.middle扩展其父级的全宽，请使用flex-grow: 1。

/* NEW */
body {
  display: inline-flex;
  flex-direction: column;
  /* border: 1px dashed red; */ /* uncomment to see container borders */
}

section {
  /* margin: 0 auto; */
  display: flex;
}
.col {
  width: 100px;
  height:100px;
  border-color: #000;
  border-style: solid;
  border-width: 1px 0px 1px 1px;
}
.col:last-child {
  border-right: 1px solid #000;
}
.middle {
  flex-grow: 1; /* NEW */
  height: 100px;
  /* width: inherit; */
  border-color: #000;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
}

<section>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</section>
<section>
  <div class="middle">Middle</div>
</section>
<section>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</section>