Ich habe ein einfaches Flex-Box-Layout mit einem Container wie:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Jetzt möchte ich, dass die Elemente in der letzten Zeile mit den anderen ausgerichtet werden. justify-content: space-between;
sollte verwendet werden, da die Breite und Höhe des Gitters angepasst werden kann.
Derzeit sieht es so aus
Hier möchte ich, dass sich das Element unten rechts in der "mittleren Spalte" befindet. Was ist der einfachste Weg, dies zu erreichen? Hier ist eine kleine jsfiddle , die dieses Verhalten zeigt.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
css
flexbox
grid-layout
Thorben Croisé
quelle
quelle
Antworten:
Fügen Sie ein hinzu,
::after
das den Raum automatisch ausfüllt. Sie müssen Ihr HTML nicht verschmutzen. Hier ist ein Codepen, der dies zeigt: http://codepen.io/DanAndreasson/pen/ZQXLXjquelle
justify-content: space-between;
von.grid
und entfernt.grid:after
und es funktioniert gleich. Nun , wenn Sie etwas versucht , das wie es total bricht. Beachten Sie, dass die Breiten für jeden 4er-Satz nicht 100% ergeben. In der Geige des OP werden die Breiten in px eingestellt, sodass Ihre Lösung in dieser Situation nicht funktioniert .space-between
. Wenn jedoch ich dasflex-basis
der.grid:after
auf die gleiche Dimensionierung wie die anderen Elemente in dem Gitter (pro-Haltepunkt, das Überschreiben den oben default / Basismodul - Code), die letzte Reihe ausgebreitete korrekt. Scheint auf Safari, iOS, Firefox, Chrome zu funktionieren (IE muss getestet werden) und meine größte Zeilengröße ist 3 bei meiner ersten Implementierung.{ content: "";flex: 0 0 32%;max-width: 480px;}
und ich habe die maximale Breite mit Änderungen an Medienabfragen geändert, sodass das Raster bei allen Breiten perfekt war.Eine Technik wäre das Einfügen einer Anzahl zusätzlicher Elemente (so viele wie die maximale Anzahl von Elementen, die Sie jemals in einer Reihe erwarten würden), denen eine Höhe von Null zugewiesen wird. Der Raum ist immer noch geteilt, aber überflüssige Zeilen fallen zu nichts zusammen:
http://codepen.io/dalgard/pen/Dbnus
In Zukunft kann dies durch die Verwendung mehrerer erreicht werden
::after(n)
.quelle
Wie bereits auf anderen Postern erwähnt, gibt es keine saubere Möglichkeit, die letzte Reihe links an der Flexbox auszurichten (zumindest gemäß der aktuellen Spezifikation).
Für das, was es wert ist: Mit dem CSS-Grid-Layout-Modul ist dies überraschend einfach zu erstellen:
Grundsätzlich läuft der relevante Code darauf hinaus:
1) Machen Sie das Containerelement zu einem Gittercontainer
2) Stellen Sie das Raster mit automatischen Spalten mit einer Breite von 100 Pixel ein. (Beachten Sie die Verwendung der automatischen Füllung (wie angenommen
auto-fit
- die (für ein 1-Zeilen-Layout) leere Spuren auf 0 reduziert -, wodurch die Elemente erweitert werden, um den verbleibenden Platz einzunehmen. Dies würde zu einem gerechtfertigten Zwischenraum führen 'Layout, wenn das Raster nur eine Zeile hat, was in unserem Fall nicht das ist, was wir wollen. (Schauen Sie sich diese Demo an, um den Unterschied zwischen ihnen zu sehen.)3) Legen Sie Lücken / Rinnen für die Rasterzeilen und -spalten fest - da hier ein Zwischenraum-Layout gewünscht wird, ist die Lücke tatsächlich eine minimale Lücke, da sie nach Bedarf wächst.
4) Ähnlich wie bei der Flexbox.
Code-Snippet anzeigen
Codepen Demo (Größe ändern, um den Effekt zu sehen)
quelle
auto-fit
auf Chrome 57-60 (und Browser, die auf der Engine basieren, wie Samsung Internet 6.0) gab es einen Fehler, da die Spezifikation zu diesem Zeitpunkt etwas mehrdeutig war. Jetzt wurde die Spezifikation geklärt und die neuen Versionen von Chrome werdenauto-fit
korrekt gerendert , aber Browser mit alter Engine werden weiterhin verwendet. Seien Sie also vorsichtig mit diesem Wert.:after
Pseudoelementen kann in Randfällen zu unerwünschten Ergebnissen führen.Ohne zusätzliches Markup hat das Hinzufügen
::after
für mich funktioniert , indem ich die Breite der Spalte angegeben habe.Mit dem HTML wie folgt:
quelle
flex-basis: 10em
anstelle von Breite verwenden.Das kannst du nicht. Flexbox ist kein Rastersystem. Es verfügt nicht über die Sprachkonstrukte, um das zu tun, wonach Sie fragen, zumindest nicht, wenn Sie es verwenden
justify-content: space-between
. Mit Flexbox können Sie am ehesten die Spaltenausrichtung verwenden, für die eine explizite Höhe festgelegt werden muss:http://cssdeck.com/labs/pvsn6t4z (Hinweis: Präfixe nicht enthalten)
Es wäre jedoch einfacher, nur Spalten zu verwenden, die eine bessere Unterstützung bieten und keine bestimmte Höhe festlegen müssen:
http://cssdeck.com/labs/dwq3x6vr (Hinweis: Präfixe nicht enthalten)
quelle
Eine mögliche Lösung besteht darin,
justify-content: flex-start;
für den.grid
Container Größenbeschränkungen für seine untergeordneten Elemente und Ränder für die entsprechenden untergeordneten Elemente zu verwenden - abhängig von der gewünschten Anzahl von Spalten.Für ein dreispaltiges Raster würde das grundlegende CSS folgendermaßen aussehen:
Es ist eine andere unvollkommene Lösung, aber es funktioniert.
http://codepen.io/tuxsudo/pen/VYERQJ
quelle
Ich weiß, dass es hier viele Antworten gibt, aber ... Der einfachste Weg, dies zu tun, ist mit einem
grid
anstelle vonflex
undgrid template columns
mitrepeat
undauto fills
, wobei Sie die Anzahl der Pixel festlegen müssen, die Sie jedem Element gegeben haben,100px
aus Ihrem Snippet-Code.quelle
Ja.! Wir können aber mit einigen Medienabfragen & Maximum keine Spalten vordefiniert .
Hier verwende ich 4 Spalten. Überprüfen Sie meinen Code:
HINWEIS
1) Es ist nicht erforderlich, eine untergeordnete Div zu erstellen. Es kann sich um ein beliebiges anderes Tag wie "img" handeln, was auch immer Sie möchten.
2) Wenn Sie mehr Spalten wünschen, passen Sie die Medienabfragen und die maximale Anzahl von Spalten an.
quelle
Wenn Sie ein Raster mit einem gewissen Abstand zwischen den Elementen und den Elementen wünschen, der ohne anfängliches Leerzeichen beginnt, funktioniert diese einfache Lösung:
Wenn Sie den anfänglichen 5px-Speicherplatz möchten, entfernen Sie einfach den negativen Rand :) Einfach.
https://jsfiddle.net/b97ewrno/2/
Die akzeptierte Antwort ist zwar gut, führt jedoch dazu, dass zwischen den Elementen in der zweiten Zeile kein Leerzeichen vorhanden ist.
quelle
Wenn Sie das letzte Element am Raster ausrichten möchten, verwenden Sie den folgenden Code:
Gitterbehälter
Element im Raster
Der Trick besteht darin, die maximale Breite des Elements gleich der maximalen Breite des Kartenrasters zu setzen: after.
Live-Demo auf Codepen
quelle
Es ist möglich, "Flex-Start" zu verwenden und die Ränder manuell hinzuzufügen. Es erfordert einige Mathe-Hacking, ist aber definitiv einfach zu machen und macht es einfach, mit einem CSS-Präprozessor wie LESS zu verwenden.
Siehe zum Beispiel dieses WENIGER Mixin:
Und dann kann es einfach verwendet werden, um ein ansprechendes Rasterlayout anzuzeigen:
Hier ist ein Beispiel von
http://codepen.io/anon/pen/YyLqVB?editors=110
quelle
Dieses Problem wurde für mich mithilfe des CSS-Rasters gelöst.
Diese Lösung ist nur anwendbar, wenn Sie eine feste Anzahl von Spalten haben, dh nein. von Elementen, die in einer einzelnen Zeile angezeigt werden sollen
-> Wenn Sie das Raster verwenden, aber nicht die Anzahl der Zeilen angeben, da die Anzahl der Elemente zunimmt, wird es in Spalten umgebrochen und Zeilen dynamisch hinzugefügt. In diesem Beispiel habe ich drei Spalten angegeben
-> Sie müssen Ihrem Kind / Ihren Zellen keine Position geben, da dies zu einer Korrektur führt, die wir nicht wollen.
quelle
Diese Version ist der beste Weg für Blöcke mit fester Breite:
http://codepen.io/7iomka/pen/oxxeNE
In anderen Fällen - Version von Dalgard
http://codepen.io/dalgard/pen/Dbnus
quelle
Es gibt einen Weg ohne Flexbox, obwohl Sie die folgenden Bedingungen erfüllen müssen. 1) Der Behälter ist gepolstert. 2) Artikel haben die gleiche Größe und Sie wissen genau, wie viele Sie pro Zeile möchten.
Die kleinere Polsterung auf der rechten Seite des Containers ermöglicht die zusätzliche Polsterung rechts von jedem Listenelement. Angenommen, andere Elemente im selben übergeordneten Element wie das Listenobjekt werden mit 0 bis 5% aufgefüllt, ist es bündig mit ihnen. Sie können die Prozentsätze auch an den gewünschten Spielraum anpassen oder px-Werte berechnen verwenden.
Natürlich können Sie dasselbe auch ohne Auffüllen des Containers tun, indem Sie mit dem n-ten Kind (IE 9+) den Rand jeder dritten Box entfernen.
quelle
Mit Flexbox und ein paar Medienabfragen habe ich diese kleine Problemumgehung durchgeführt : http://codepen.io/una/pen/yNEGjv (es ist ein bisschen hackig, funktioniert aber):
quelle
Ich habe ein SCSS-Mixin dafür gemacht.
Dies ist der Codepen-Link: http://codepen.io/diana_aceves/pen/KVGNZg
Sie müssen nur die Elementbreite in Prozent und Anzahl der Spalten festlegen.
Ich hoffe das kann dir helfen.
quelle
Hier sind noch ein paar scss-Mixins.
Diese Mixins setzen voraus, dass Sie keine js-Plugins wie Isotope verwenden (sie respektieren die HTML-Markup-Reihenfolge nicht und bringen daher die n-ten CSS-Regeln durcheinander).
Sie können sie auch in vollem Umfang nutzen, insbesondere wenn Sie Ihre reaktionsschnellen Haltepunkte zunächst mobil schreiben. Idealerweise verwenden Sie flexbox_grid () für den kleineren Haltepunkt und flexbox_cell () für die folgenden Haltepunkte. flexbox_cell () sorgt dafür, dass zuvor festgelegte Ränder zurückgesetzt werden, die bei größeren Haltepunkten nicht mehr verwendet werden.
Übrigens, solange Sie die Flex-Eigenschaften Ihres Containers korrekt eingerichtet haben, können Sie bei Bedarf auch nur flexbox_cell () für die Elemente verwenden.
Hier ist der Code:
Verwendungszweck:
Natürlich liegt es an Ihnen, die Polsterung / den Rand / die Breite des Containers und die unteren Ränder der Zelle und dergleichen festzulegen.
Ich hoffe es hilft!
quelle
Das ist ziemlich hackig, aber es funktioniert bei mir. Ich habe versucht, konsistente Abstände / Ränder zu erzielen.
http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/
quelle
Es scheint, als hätte niemand die Flex-Grow-Lösung für den letzten Punkt vorgeschlagen. Die Idee ist, dass Ihr letzter Flex-Gegenstand mit flex-grow so viel Platz wie möglich einnimmt: 1.
Hinweis: Diese Lösung ist nicht perfekt, insbesondere wenn Sie Elemente in Ihren Flex-Elementen zentriert haben, da sie sich auf das möglicherweise große letzte Flex-Element konzentrieren.
quelle
Dies ist eine Kombination aus vielen Antworten, aber es macht genau das, was ich brauchte - das heißt, das letzte Kind in einem Flex-Container links auszurichten und dabei das Zwischenraumverhalten beizubehalten (in diesem Fall ist es dreispaltig) Layout).
Hier ist das Markup:
quelle
flex-grow: 0.9
stattflex-basis
Werke für beliebig viele Spalten gefunden. Getestet in einer Reihe moderner Browser - es funktioniert in allen, aber die Auffüllung ist im IE defekt (funktioniert aber in Edge0Angenommen:
Stellen Sie einen linken Rand für jedes Element außer dem 1., 5. und 9. Element usw. ein. Wenn der linke Rand 10 Pixel beträgt, hat jede Zeile einen Rand von 30 Pixel, der auf 4 Elemente verteilt ist. Die prozentuale Breite für den Artikel wird wie folgt berechnet:
Dies ist eine anständige Problemumgehung für Probleme mit der letzten Reihe der Flexbox.
quelle
Wenn Sie die Breite der Leerzeichen zwischen Elementen in der Zeile und die Anzahl der Elemente in einer Zeile kennen, funktioniert dies wie folgt:
quelle
Verwenden Sie einfach den Jquery / Javascript-Trick, um ein leeres div hinzuzufügen:
quelle
Oh Mann, ich denke, ich habe eine gute Lösung mit minimalem CSS und ohne JS gefunden. Hör zu:
Der Schlüssel hier ist, sich daran zu erinnern, dass das, was wir erreichen wollen, genau das ist, was wir tun
text-align: justify
!Die leeren Elemente im HTML-Code dienen dazu, die letzte Zeile perfekt anzuzeigen, ohne das Erscheinungsbild zu ändern. Sie werden jedoch möglicherweise nicht benötigt, wenn Sie das erreichen möchten. Für eine perfekte Balance in jeder Situation benötigen Sie mindestens x-4 leere Elemente, wobei x die Anzahl der anzuzeigenden Elemente oder n-2 die Anzahl der anzuzeigenden Spalten ist.
quelle
Fügen Sie einfach einige gefälschte Elemente mit denselben Eigenschaften hinzu, mit Ausnahme der Höhe, die bis zum Ende auf 0 Pixel eingestellt ist.
quelle
Sie möchten ausrichten
verwenden
align-content: flex-start;
stattjustify-content: space-between;
Dadurch werden die Elemente in der letzten Zeile nach links gezogen und der Platz gleichmäßig verteilt.
https://codepen.io/anon/pen/aQggBW?editors=1100
danAnderson-Lösung ist NICHT DYNAMISCH .PERİOD !!
Wenn die Artikelbreite von 25 auf 28 geändert wurde, versagt dan anderson zwischen den Bildern
danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100
dynamisch: https://codepen.io/anon/pen/aQggBW?editors=1100
Das habe ich versucht zu sagen. dans ist hacky .....
quelle
Ich konnte es
justify-content: space-between
auf dem Container machenquelle