html - 等宽 Flexbox 行，无论列数或列内容如何

Question

我正在尝试通过 Flexbox 创建三行，其中包含可变数量的列(顶部和底部的行将在数量上匹配)和一个中间列，该列只是一列。

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

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

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;
}

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

https://jsfiddle.net/o5xLuq51/

Answer 1

使这些元素的整体容器(在本例中恰好是 body 元素)成为具有列方向的内联级 Flex 容器。

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

由于 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>