html - CSS。如何使用 flex 居中显示宽度而不是可用空间的元素

Question

我想要一个元素 (100px) 居中显示。此元素在每一侧都有元素，例如 300px 和 200px。

我用 flex 做到了，结果有 2 个空闲空间/灵活宽度元素。居中元素在整个显示宽度的自由空间中居中。您也可以在图像中看到它 codepen .

我想要中间的 100px 框(如绿色行)。我没有对侧面元素使用左/右浮动，然后在中间元素中使用 float ，因为我需要将背景图像应用于灵活宽度的元素。

codepen .

html, body, div {
  width: 100%;
}

.row {
  height: 100px;
}
.row.row-flex {
  display: flex;
}
.row.row-green {
  background-color: green;
}
.row.row-red {
  background-color: red;
}

.col {
  margin: 0 auto;
  height: 100%;
  border: 1px solid black;
  text-align: center;
}
.col.col-100 {
  width: 100px;
}
.col.col-200 {
  width: 200px;
}
.col.col-300 {
  width: 300px;
}
.col.col-flex {
  flex: 1;
}

<div class="row row-flex row-red">
  <div class="col col-300">300px</div>
  <div class="col col-flex"></div>
  <div class="col col-100">100px</div>
  <div class="col col-flex"></div>
  <div class="col col-200">200px</div>
</div>

<div class="row row-green">
  <div class="col col-100">100px</div>
</div>

Answer 1

在这种情况下，我认为绝对定位才是正道。 Flex 以一种方式定位它的 child ，使每个 child 都能公平地分享自由空间。添加

row {position: relative;}

和

&.col-100{position: absolute; top: 0; left: calc(50% - 50px);}

将 100 像素的 div 与整行对齐。

编辑代码笔:https://codepen.io/anon/pen/pRwOYv