Ohne weitere Umschweife: Was Sie wollen, ist dieser Effekt, bitte codieren Sie ihn!
Dies ist aus einem Projekt, das ich geschrieben habe. Das Flex-Layout, das ich damals verwendet habe, kann durchgestrichen werden, wenn es nicht benötigt wird.
①Die äußere rote übergeordnete Box ist 100 % breit;
②Die internen Unterkästen sind einheitlich auf 25 % Breite eingestellt;
③ Stellen Sie das äußere rote übergeordnete Feld auf 100 % Breite ein
Anzeige: flex;
justify-content: space-between;
Flex-Wrap: Wrap;
Später stellte ich jedoch fest, dass die erste Reihe normal war und die beiden Kästchen in der zweiten Reihe an beiden Enden ausgerichtet waren. Machen Sie sich also keine Sorgen.
④ Stellen Sie die Breite der internen Unterboxen auf 25 % ein und passen Sie sie dann individuell an
/* Fügen Sie den folgenden Stil hinzu, sodass das Raster in der zweiten Zeile links liegt */
.(child box class):nth-child(n+6) {
margin-right: auto;
}
⑤ Es ist vorbei!