Выровнять элементы в 2 рядах в Flexbox ⇐ CSS

[Anonymous]

У меня есть 5 элементов, которые я хочу выровнять в 2 рядах, первый ряд с 3 элементами с той же шириной, а во втором ряду - один элемент 2/3 шириной, а другой - 1/3

Код: Выделить всё

< /code>
Когда я использую сетку: < /p>
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
grid-gap: 30px;
}
.width-third {
grid-column: span 4;
}
.width-two-third {
grid-column: span 8;
}

Все выглядит хорошо. Важная вещь для меня: конец ширины-третья элемента во втором ряду выравнивается с концом 2-го элемента в первой строке. < /P>
Однако, когда я использую Flex: < /p>

Код: Выделить всё

.container {
display: flex;
gap: 30px;
}
.width-third {
flex-basis: calc(100%/3);
}
.width-two-third {
flex-basis: calc(200%/3);
}

Конец элемента немного выключен. Я думаю, это потому, что сетка и гибкая ручка разрыва по -разному? Есть ли способ достичь того же результата с помощью Flexbox?

Подробнее здесь: https://stackoverflow.com/questions/797 ... in-flexbox