Lücken? Keuchen!

Zuerst gab es Flexboxen (die Kinder eines Displays: Flex -Behälter). Wenn Sie wollten, dass sie visuell getrennt sind, mussten Sie die Begründung in der Inhalte (dh Mayify-Incontent: Space-Between), Rand-Tricks oder manchmal beides verwenden. Dann kamen Gitter (ein Display: Gitterbehälter), und die Gitter könnten dank der Gittervergütung nicht minimale Lücken zwischen Gitterzellen nicht trackt. Flexboxen hatten keine Lücken.

Jetzt können sie dank der wachsenden Unterstützung von Gap den Nachfolger für die Netzspitze, die nicht auf Netze beschränkt ist. Mit Lücke können Sie Ihre Gitter, Ihre Flexboxen und sogar Ihre mehreren Spalten spalten. Es ist Gaptastic!

Lücke mit Raster

Beginnen wir dort, wo die Lücke das robusteste ist: CSS -Netz. Hier ist ein grundlegendes Netzaufbau in HTML und CSS:

 <abschnitt>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
</abschnitt>

 Abschnitt {
  Anzeige: Grid;
  Raster-Template-Reihen: Wiederholung (2, Auto);
  Grid-Template-Säulen: Wiederholung (4, Auto);
  Lücke: 1EM;
}
Abschnitt div {
  Breite: 2EM;
}

Dadurch unterscheidet die Netzzellen mindestens 1Em voneinander. Der Trennungsabstand kann größer sein, abhängig von anderen Bedingungen, die außerhalb des Rahmens dieses Pfostens hinausgehen, sollten jedoch mindestens durch 1EM getrennt werden. (OK, machen wir ein Beispiel: Die Lücken von GAP sind zusätzlich zu den Rändern an den Gitterzellen. Wenn also alle Gitterelemente Rand haben: 2px; dann würde der Visualabstand zwischen Gitterzellen mindestens 1em plus 4px sein.) Standardmäßig ändert sich die Lückengröße, sodass sie ihre Zellen füllen.

Dies alles funktioniert, weil die Lücke für die ROW-Lücke und die Säulenlücke für die Eigenschaften tatsächlich geschaut ist. Die Lücke: 1EM wird als Lücke interpretiert: 1EM 1EM, was für Reihenverletzungen Kurzschrift ist: 1EM; Säulenlücke: 1EM;. Wenn Sie verschiedene Zeilen- und Spaltenspaltabstände wünschen, so etwas wie Lücke: 0,5EM 1EM funktioniert gut.

Lücke mit Flexbox

Das Gleiche in einem Flexbox -Kontext zu tun, gibt Ihnen Lücken, aber nicht ganz so wie in Grids. Nehmen Sie das gleiche HTML wie oben an, aber dieses CSS stattdessen:

 Abschnitt {
  Anzeige: Flex;
  Flex-Wrap: Wrap;
  Lücke: 1EM;
}

Die Flexboxen werden zumindest den Wert der Lücke hier auseinander gedrückt und (dank Flex-Wrap) in neue Flex-Linien wickeln, wenn sie in ihrem Flex-Behälter keinen Platz mehr haben. Das Ändern der Lückeentfernung kann zu einer Änderung der Verpackung der Flex -Elemente führen. Anders als im Netz ändert sich die Lücken zwischen Flex -Elementen nicht an die Größen der Flex -Elemente. Lückenänderungen können dazu führen, dass die Flexverpackung an verschiedenen Stellen auftritt, was bedeutet, dass sich die Anzahl der Flex -Elemente pro Zeile ändert. Die Breiten bleiben jedoch gleich (es sei denn, Sie haben sie so eingestellt, dass sie über Flex wachsen oder schrumpfen, das heißt).

Lücke mit Multi-Säulen

Im Fall eines mehreren Inhalts gibt es eine Einschränkung der Lücke: Es werden nur Spaltenlücken verwendet. Sie können Reihenlücken für mehrfache deklarieren, wenn Sie möchten, aber sie werden ignoriert.

 Abschnitt {
  Spalten: 2;
  Lücke: 1EM;
}

Unterstützung

Die Unterstützung für Lücke, Zeile und Säulenlücke ist überraschend weit verbreitet. Mozilla's hatte sie seit Version 61, Chromium seit Version 66, und dank der Arbeit von Igalias Sergio Villar kommen sie bald zu Safari und Mobile Safari (sie sind bereits in der Technologie -Vorschau -Builds). Wenn also Ihr Gitter-, Flex- oder mehrfacher Inhalt etwas mehr Platz zum Atmen benötigt, machen Sie sich bereit, in die Lücke zu fallen!

Das obige ist der detaillierte Inhalt vonLücken? Keuchen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!