Пожалуйста, посмотрите на изображение ниже
То, что я собирался сделать довольно смущающе довольно давно, - это уменьшить диапазон цвета фона последнего элемента, чтобы сделать его равным другой стороне. Поигравшись, я не смог сделать это, не испортив выравнивание столбца в отличие от остальной части ряда. Пожалуйста, обратите внимание, что я пытаюсь сделать это без использования пикселей (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;
}
Ссылка на codepen
https://codepen.io/anon/pen/KxmJeM
Я пытался изменить ширину гибких элементов в последнем ряду, но у меня нет кубиков, которые находят правильную комбинацию и возятся с отступом на правой стороне, но это тоже не сработает.
Спасибо за вашу помощь