So stellen Sie den minimalen Abstand zwischen Flexbox-Elementen ein, die ich margin: 0 5px
am .item
und margin: 0 -5px
am Container verwende. Für mich scheint es ein Hack zu sein, aber ich kann keinen besseren Weg finden, dies zu tun.
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
row-gap: 5px
- erledigt.gap
Eigenschaft auf Flex-Container ( caniuse )Antworten:
border-spacing
für Tabellen (außer für CSS-Eigenschaften,gap
die in den meisten Browsern nicht gut unterstützt werden, caniuse )Daher ist es etwas schwieriger, das zu erreichen, wonach Sie fragen.
Nach meiner Erfahrung, die „saubersten“ Weg, der nicht verwendet
:first-child
/:last-child
ohne Änderung und Werke aufflex-wrap:wrap
gesetzt istpadding:5px
auf dem Behälter undmargin:5px
auf die Kinder. Dies führt zu einer10px
Lücke zwischen jedem Kind und zwischen jedem Kind und seinem Elternteil.Demo
quelle
order
Eigenschaft festgelegt ist?:first-child/:last-child
wird nicht wie erwartet funktionieren.Dies ist kein Hack. Dieselbe Technik wird auch von Bootstrap und seinem Raster verwendet, obwohl Bootstrap anstelle von Rand Padding für seine Spalten verwendet.
quelle
height:100%; width:100%
die Polsterung des Elements ignoriert.flex-basis
Werte nicht berücksichtigt werdenbox-sizing: border-box
, sodass ein untergeordnetes Element mit einem Auffüllen oder Rand das übergeordnete Element (oder in diesem Fall einen Zeilenumbruch) überläuft. QuelleFlexbox und CSS-Berechnung mit Unterstützung für mehrere Zeilen
Hallo, unten ist meine Arbeitslösung für alle Browser, die Flexbox unterstützen. Keine negativen Margen.
Geigen-Demo
Beachten Sie, dass dieser Code mit SASS kürzer sein kann
Update 2020.II.11 Ausgerichtete Spalten in der letzten Zeile links
Update 2020.II.14 Rand unten in der letzten Zeile entfernt
quelle
justify-content
.justify-content: space-evenly;
oderjustify-content: space-around;
.Sie können transparente Ränder verwenden.
Ich habe dieses Problem in Betracht gezogen, als ich versucht habe, ein Flex-Grid-Modell zu erstellen, das für ältere Browser auf ein Tabellen- + Tabellenzellenmodell zurückgreifen kann. Und Grenzen für Säulenrinnen schienen mir die am besten geeignete Wahl zu sein. dh Tabellenzellen haben keine Ränder.
z.B
Beachten Sie auch, dass Sie
min-width: 50px;
für Flexbox benötigen . Das Flex-Modell behandelt keine festen Größen, es sei denn, Sie tun diesflex: none;
für das bestimmte untergeordnete Element, das Sie als fest festlegen möchten, und sind daher vom Sein ausgeschlossen"flexi"
. http://jsfiddle.net/GLpUp/4/ Aber alle Spalten zusammenflex:none;
sind kein Flex-Modell mehr. Hier ist etwas näher an einem Flex-Modell: http://jsfiddle.net/GLpUp/5/Sie können also normalerweise Ränder verwenden, wenn Sie den Fallback für Tabellenzellen für ältere Browser nicht benötigen. http://jsfiddle.net/GLpUp/3/
background-clip: padding-box;
Bei Verwendung eines Hintergrunds ist eine Einstellung erforderlich, da sonst der Hintergrund in den transparenten Randbereich fließt.quelle
background-clip: padding-box
Diese Lösung funktioniert in allen Fällen, auch wenn mehrere Zeilen oder eine beliebige Anzahl von Elementen vorhanden sind. Die Anzahl der Abschnitte sollte jedoch gleich sein, Sie möchten 4 in der ersten Zeile und 3 in der zweiten Zeile. Dies funktioniert nicht. Der Platz für den 4. Inhalt ist leer, der Container füllt ihn nicht.
Wir benutzen
display: grid;
und seine Eigenschaften.Der Nachteil dieser Methode ist, dass in Mobile Opera Mini nicht unterstützt wird und in PC dies erst nach IE10 funktioniert .
Hinweis für vollständige Browserkompatibilität einschließlich IE11 verwenden Sie bitte Autoprefixer
ALTE ANTWORT
Betrachten Sie es nicht als eine alte Lösung, es ist immer noch eine der besten, wenn Sie nur eine einzelne Reihe von Elementen möchten und es mit allen Browsern funktioniert.
Diese Methode wird von der CSS-Geschwisterkombination verwendet , sodass Sie sie auch auf viele andere Arten bearbeiten können. Wenn Ihre Kombination jedoch falsch ist, kann dies ebenfalls zu Problemen führen.
Der folgende Code reicht aus. Bei dieser Methode muss
margin: 0 -5px;
der#box
Wrapper nicht übergeben werden.Ein Arbeitsprobe für Sie:
quelle
grid-template-columns
uns definierten nicht dynamisch verwalten können. Wenn Sie also den Wert angeben,1fr 1fr 1fr 1fr
wird das div in aufgeteilt4fractions
und versucht, diefractions
untergeordneten Elemente in jedem zu füllen. Meines Wissens ist dies der einzige Weggrid
. Was ich in der Antwort angegeben habe, ist, dass, wenn der Benutzer das div in 4 aufteilen und sie mit vielen Elementen auch für mehrere Zeilen verwenden muss, diesgid
helfen wird.Sie können
& > * + *
als Selektor verwenden, um aflex-gap
(für eine einzelne Zeile) zu emulieren :Wenn Sie Flex Wrapping unterstützen müssen , können Sie ein Wrapper-Element verwenden:
quelle
*
Operator die Spezifität nicht wie erwartet erhöht. Abhängig von Ihrem vorhandenen CSS müssen Sie möglicherweise entweder die Spezifität des.flex > *
Selektors erhöhen oder!important
die Regel ergänzen , wenn andere Selektoren einen Rand auf dieses Element anwenden.Angenommen, Sie möchten einen
10px
Abstand zwischen den Elementen festlegen , den Sie einfach.item {margin-right:10px;}
für alle festlegen und auf den letzten zurücksetzen können.item:last-child {margin-right:0;}
Sie können auch die allgemeine Geschwister-
~
oder die nächste+
Geschwisterauswahl verwenden, um den linken Rand für die Elemente festzulegen, die das erste ausschließen.item ~ .item {margin-left:10px;}
oder verwenden.item:not(:last-child) {margin-right: 10px;}
Flexbox ist so clever, dass es das Raster automatisch neu berechnet und gleichmäßig verteilt.
Wenn Sie Flex Wrap zulassen möchten , sehen Sie sich das folgende Beispiel an.
quelle
:last-child
nicht jedes letzte Kind am Ende einer Zeile betroffen ist, richtig?Ich habe eine Lösung gefunden, die auf dem allgemeinen Geschwister-Selektor basiert
~
und eine unendliche Verschachtelung ermöglicht.In diesem Codestift finden Sie ein funktionierendes Beispiel
Grundsätzlich erhält innerhalb von Spaltencontainern jedes Kind, dem ein anderes Kind vorangestellt ist, einen oberen Rand. Ebenso erhält in jedem Zeilencontainer jedes Kind, dem ein anderes vorangestellt ist, einen linken Rand.
quelle
In Anlehnung an Sawas Antwort finden Sie hier eine leicht verbesserte Version, mit der Sie einen festen Abstand zwischen den Elementen ohne den umgebenden Rand festlegen können.
http://jsfiddle.net/chris00/s52wmgtq/49/
Ebenfalls enthalten ist die Safari "-webkit-flex" -Version.
quelle
Laut #ChromDevSummit gibt es eine Implementierung der
gap
Eigenschaft für Flexbox, obwohl sie derzeit (14. November 2019) nur in Firefox unterstützt wird, aber bald in Chrome implementiert werden sollte:Live-Demo
Ich werde meine Antwort aktualisieren, sobald sie auch in Chrome eingeht.
quelle
Ich habe dies für gewickelte und feste Spalten verwendet. Der Schlüssel hier ist
calc()
SCSS-Probe
Vollständiges Codepen-Beispiel
quelle
Ein Flexcontainer mit -x (negativem) Rand und Flex-Elemente mit x (positivem) Rand oder Polsterung führen beide zum gewünschten visuellen Ergebnis: Flex-Elemente haben nur einen festen Abstand von 2x dazwischen ihnen.
Es scheint einfach eine Frage der Präferenz zu sein, ob für die Flex-Elemente ein Rand oder eine Polsterung verwendet werden soll.
In diesem Beispiel werden die Flex-Elemente dynamisch skaliert, um die feste Lücke beizubehalten:
quelle
Schließlich werden sie die
gap
Eigenschaft zu flexbox hinzufügen. Bis dahin könnten Sie stattdessen ein CSS-Raster verwenden, das bereits über diegap
Eigenschaft verfügt und nur eine einzelne Zeile enthält. Schöner als mit Margen umzugehen.quelle
CSS
gap
Eigenschaft:Es gibt eine neue
gap
CSS-Eigenschaft für mehrspaltige, Flexbox- und Grid-Layouts, die jetzt in einigen Browsern funktioniert! (Siehe Kann ich Link 1 verwenden ? Link 2 ).Zum Zeitpunkt des Schreibens funktioniert dies leider nur in Firefox. Es funktioniert derzeit in Chrome, wenn Sie "Experimentelle Webplattformfunktionen aktivieren" in aktivieren
about:flags
.quelle
Bei Verwendung von Flexbox in meiner Lösung habe ich die
justify-content
Eigenschaft für das übergeordnete Element (Container) verwendet und die Ränder innerhalb derflex-basis
Eigenschaft der Elemente angegeben. Überprüfen Sie das folgende Code-Snippet:quelle
Mit der Flexbox ist das Erstellen von Dachrinnen ein Problem, insbesondere wenn es um das Wickeln geht.
Sie müssen negative Ränder verwenden ( wie in der Frage gezeigt ):
... oder ändern Sie den HTML-Code ( wie in einer anderen Antwort gezeigt ):
... oder etwas anderes.
In jedem Fall benötigen Sie einen hässlichen Hack, damit es funktioniert, da die Flexbox
flex-gap
( zumindest für den Moment) keine " " -Funktion bietet .Das Problem der Dachrinnen ist jedoch mit CSS Grid Layout einfach und unkompliziert.
Die Rasterspezifikation bietet Eigenschaften, die Platz zwischen Rasterelementen schaffen, während der Abstand zwischen Elementen und dem Container ignoriert wird. Diese Eigenschaften sind:
grid-column-gap
grid-row-gap
grid-gap
(die Abkürzung für beide Eigenschaften oben)Vor kurzem wurde die Spezifikation aktualisiert, um sie an das CSS-Box-Ausrichtungsmodul anzupassen , das eine Reihe von Ausrichtungseigenschaften für alle Box-Modelle bereitstellt. Die Eigenschaften sind also jetzt:
column-gap
row-gap
gap
(Stenografie)Da jedoch nicht alle Grid-unterstützenden Browser die neueren Eigenschaften unterstützen, verwende ich die Originalversionen in der folgenden Demo.
Wenn zwischen den Elementen und dem Container ein Abstand erforderlich ist,
padding
funktioniert der Container einwandfrei (siehe das dritte Beispiel in der Demo unten).Aus der Spezifikation:
Mehr Informationen:
quelle
Warum nicht so:
Dies verwendet den benachbarten Geschwister-Selektor , um alle
.item
Elemente außer dem ersten a anzugebenmargin-left
. Dank der Flexbox ergeben sich sogar gleich breite Elemente. Dies könntemargin-top
natürlich auch mit vertikal positionierten Elementen erfolgen .quelle
Hier ist meine Lösung, für die keine Klassen für die untergeordneten Elemente festgelegt werden müssen:
Verwendungszweck:
Dieselbe Technik kann zusätzlich zu dem oben angegebenen Inline-Beispiel für normale Flex-Zeilen und -Spalten verwendet und um Klassen für andere Abstände als 4 Pixel erweitert werden.
quelle
In solchen Fällen verwende ich oft den Operator +
quelle
Ich finde, der einfachste Weg, dies zu tun, besteht darin, Prozentsätze zu verwenden und nur zuzulassen, dass der Rand Ihre Breite angleicht
Dies bedeutet, dass Sie am Ende so etwas haben, wenn Sie Ihr Beispiel verwenden
Bedeutet jedoch, dass Ihre Werte auf der Breite basieren, was möglicherweise nicht für alle geeignet ist.
quelle
Hier ist ein Raster von Karten-UI-Elementen, deren Abstand mithilfe einer flexiblen Box vervollständigt wurde:
Ich war frustriert, die Karten manuell voneinander zu trennen, indem ich Polster und Ränder mit zweifelhaften Ergebnissen manipulierte. Hier sind die Kombinationen von CSS-Attributen, die ich als sehr effektiv empfunden habe:
Hoffe, das hilft den Menschen, Gegenwart und Zukunft.
quelle
Columnify - Eine Soloklasse für N Spalten
Flexbox und SCSS
Flexbox und CSS
Spielen Sie damit auf JSFiddle .
quelle
quelle
Verwenden Sie einfach
.item + .item
in der Auswahl, um von der Sekunde abzugleichen.item
quelle
Angenommen:
Stellen Sie für jeden Artikel einen linken Rand ein, außer für den 1., 5., 9. Artikel usw. und stellen Sie für jedes Element eine feste Breite ein. Wenn der linke Rand 10 Pixel beträgt, hat jede Zeile einen Rand von 30 Pixel zwischen 4 Elementen. Die prozentuale Breite des Elements kann wie folgt berechnet werden:
Dies ist eine anständige Problemumgehung für Probleme mit der letzten Reihe der Flexbox.
quelle
Es gibt in der Tat eine nette, ordentliche, nur CSS-fähige Möglichkeit, dies zu tun (die man als "besser" betrachten kann).
Von allen hier veröffentlichten Antworten habe ich nur eine gefunden, die calc () erfolgreich verwendet (von Dariusz Sikorski). Aber wenn gestellt mit: "aber es schlägt fehl, wenn es nur 2 Elemente in der letzten Zeile gibt", wurde keine Lösung erweitert.
Diese Lösung adressiert die Frage des OP mit einer Alternative zu negativen Margen und adressiert das Problem, das Dariusz stellt.
Anmerkungen:
calc()
der Browser100%/3
rechnen, wie er will - (obwohl 33,3333% genauso gut(1em/3)*2
funktionieren sollten ) und (obwohl .66em auch gut funktionieren sollte) .::after
, um die letzte Zeile aufzufüllen, wenn weniger Elemente als Spalten vorhanden sindAuch unter https://codepen.io/anon/pen/rqWagE
quelle
Sie könnten die neue Eigenschaft verwenden
gap
. Ich kopiere die Erklärung, die ich in diesem Artikel gefunden habe , sowie weitere InformationenLeider unterstützt derzeit nur FireFox Lücken in Flex-Layouts.
quelle
gap
wurde bereits in einer Antwort hier empfohlen stackoverflow.com/a/58041749/2756409 Auch dies ist kein CSS.Es funktioniert nicht in jedem Fall, aber wenn Sie flexible untergeordnete Breiten (%) haben und die Anzahl der Elemente pro Zeile kennen, können Sie die Ränder der erforderlichen Elemente mithilfe von sehr genau angeben
nth-child
Selektoren .Es hängt weitgehend davon ab, was Sie unter "besser" verstehen. Auf diese Weise ist kein zusätzliches Wrapper-Markup für untergeordnete oder negative Elemente erforderlich - aber beide Dinge haben ihren Platz.
quelle
Ich bin früher auf dasselbe Problem gestoßen und bin dann auf die Antwort darauf gestoßen. Hoffe, es wird anderen als zukünftige Referenz helfen.
lange Antwort kurz, fügen Sie Ihrem Kind Flex-Items einen Rand hinzu. Dann können Sie Ränder zwischen Flex-Elementen nach Belieben festlegen. Im Snippet verwende ich Schwarz zur Veranschaulichung. Sie können "transparent" verwenden, wenn Sie möchten.
quelle
Der Trick mit dem negativen Rand des Boxcontainers funktioniert einfach großartig. Hier ist ein weiteres Beispiel, das hervorragend mit Ordnung, Verpackung und was nicht funktioniert.
quelle