html - 如何在不影响flex items元素对齐的情况下减小最后一行的背景色宽度？

Question

请看下图

我一直很尴尬地打算做的是减少最后一项背景颜色的跨度，使其与另一边相等。在摆弄之后，我无法做到这一点而不会弄乱列与行的其余部分的对齐方式。请注意，我正在尝试在不使用像素 (px) 作为要求的情况下执行此操作。

这是我的代码

HTML

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>

  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>

  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>

  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>

CSS

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 45vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  background-color: grey;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}

代码笔链接 https://codepen.io/anon/pen/KxmJeM

我尝试更改最后一行中 flex 元素的宽度，但我找不到正确的组合并摆弄右侧的填充，但这也行不通。

谢谢你的帮助

Answer 1

您可以尝试以下方法。这有点 hack，但这就是您需要解决的问题:

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 42vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  position: relative;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}
.container > div:last-child:before {
  content: "";
  display: block;
  position: absolute;
  left: 1vw;
  right: 3vw;
  background: grey;
  height: 100%;
  border-radius: 100px;
  z-index: -1;
}

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>
  
  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>
  
  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>
  
  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>