Richten Sie Elemente in 2 Zeilen in Flexbox aus ⇐ CSS

[Anonymous]

Ich habe 5 Elemente, die ich in 2 Zeilen ausrichten möchte, die erste Zeile mit 3 Elementen mit der gleichen Breite und in der zweiten Reihe, ein Element 2/3 Breite und die andere 1/3

Code: Select all

< /code>
Wenn ich Raster verwende: < /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;
}

Alles sieht gut aus. Das Wichtigste für mich: Das Ende des Breitens-zwei-Drittel-Elements in der zweiten Zeile richtet sich mit dem Ende des 2. Elements in der ersten Zeile aus.

Code: Select all

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

Das Ende des Elements ist leicht ausgeschaltet. Ich denke, das liegt daran, dass Gitter und Flex -Griff unterschiedlich greifen? Gibt es eine Möglichkeit, das gleiche Ergebnis mit Flexbox zu erzielen?