Mein Problem ist, dass ich die flexbox mit variabler Bereichsbreite haben will, und alles funktioniert gut, aber nicht in der letzten Reihe. Ich möchte die gleiche Dimension für alle Kinder, auch wenn die Zeile nicht voller Kinder ist (die letzte Zeile).
%Vor%Im JSFiddle-Beispiel habe ich eine dynamische Situation erstellt.
Meine Flex-Divs können bis 150px schrumpfen und bis zu 250px wachsen, aber alle müssen die gleiche Größe haben (und natürlich möchte ich eine CSS-Lösung, mit JS kenne ich den Weg).
Leider gibt es in der aktuellen Iteration von flexbox (Level 1) keinen sauberen Weg, das Problem der letzten Zeilenausrichtung zu lösen. Es ist ein häufiges Problem.
Es wäre nützlich, eine Flex-Eigenschaft zu haben:
last-row last-column only-child-in-a-row alone-in-a-column Dieses Problem scheint für Flexbox Level 2 eine hohe Priorität zu haben:
Obwohl dieses Verhalten in flexbox schwer zu erreichen ist, ist es im CSS-Grid-Layout einfach und einfach:
Falls Grid keine Option ist, ist hier eine Liste mit ähnlichen Fragen, die verschiedene Flexbox-Hacks enthalten:
Als schnelle und schmutzige Lösung kann man verwenden:
%Vor%Ich habe diese Problemumgehung verwendet, auch wenn sie nicht sehr elegant ist und nicht die Möglichkeiten von Flexbox nutzt.
Es kann unter folgenden Bedingungen ausgeführt werden:
Wenn dies der Fall ist, können Sie das folgende Snippet verwenden:
%Vor%Hier habe ich ein Beispiel für codepen erstellt, das auch einen Rand implementiert.
>Die zweite und die dritte Bedingung können vermieden werden, indem Sie css-Variablen verwenden (wenn Sie sich dafür entschieden haben, Unterstützung dafür bereitzustellen) und das obige scss-Snippet kompilieren.
Nun, es stimmt, wir könnten es auch vor der flexbox machen, aber display: flex kann immer noch essentiell für ein responsives Design sein.