Eine kurze Erläuterung zweier Methoden zur Lösung von platzgleichmäßigen Kompatibilitätsproblemen

Seit seiner Einführung im Jahr 2009 wird Flex von fast allen Browsern unterstützt. Als einfache, reaktionsfähige Layoutlösung bringt Flex viel Komfort in unsere Layoutentwicklung.
Die Eigenschaft „Justify-Content“ ist eine sehr häufig verwendete Eigenschaft im Flex-Layout, die die Ausrichtung untergeordneter Elemente auf der Hauptachse definiert. Es verfügt über Eigenschaften flex-start | flex-end | center | space-between | space-around | space-evenly .

Während der Entwicklung habe ich jedoch festgestellt, dass bei der Verwendung von space-evenly Kompatibilitätsprobleme auftreten. Beim Testen auf einem iPhone 5s stellte ich fest, dass die untergeordneten Elemente im Container mit dem Satz justify-content: space-evenly nicht wie erwartet gleichmäßig entlang der Hauptachse verteilt waren, sondern nach links gedrängt wurden.

.container {
  Anzeige: Flex;
  Inhalt ausrichten: gleichmäßiger Abstand;
}

Nachdem ich „Kann ich Space-Evenly verwenden?“ geprüft hatte, stellte ich fest, dass der unterstützte Bereich von Space-Evenly tatsächlich relativ klein ist.

Die Definition der space-evenly-Eigenschaft auf MDN lautet:

Flex-Elemente werden innerhalb des angegebenen Ausrichtungscontainers gleichmäßig entlang der Hauptachse verteilt. Der Abstand zwischen benachbarten Flex-Elementen, der Abstand vom Anfang der Hauptachse zum ersten Flex-Element und der Abstand vom Ende der Hauptachse zum letzten Flex-Element sind alle exakt gleich.

Zur Lösung dieses Problems sind mir zwei Möglichkeiten eingefallen:

Verwenden von Flex-Grow

Flex-Grow gibt an, wie der verbleibende Platz des Containers auf untergeordnete Elemente verteilt werden soll.
Durch Festlegen des Attributs „flex-grow: 1“ für alle untergeordneten Elemente teilen diese den Platz im Container gleichmäßig auf und erzielen so den Effekt einer „gleichmäßigen Verteilung und gleichen Abstände“.

.container {
  Anzeige: Flex;
  .Kind: {
    biegen: 1;
  }
}

Verwenden von Leerzeichen zwischen

Eine andere Möglichkeit besteht darin, den Abstand zwischen den Eigenschaften „space-between“ zu verwenden, die der Eigenschaft „space-evenly“ ähneln. Diese beiden Eigenschaften liegen sehr nahe beieinander und bei space-between treten selten Kompatibilitätsprobleme auf.

Der Unterschied besteht darin, dass bei „space-evenly“ jedes untergeordnete Element auf beiden Seiten den gleichen Abstand hat, während bei „space-between“ das erste Element jeder Zeile am Zeilenanfang und das letzte Element jeder Zeile am Zeilenende ausgerichtet ist.

Angenommen, ein Container enthält fünf untergeordnete Elemente. Der Unterschied zwischen diesen beiden Attributen lässt sich einfach wie folgt ausdrücken:

// gleichmäßig verteilen
|--Sohn--Sohn--Sohn--Sohn--Sohn--|

// Leerzeichen dazwischen
|Zi--Zi--Zi--Zi--Zi|

Das bedeutet, dass „space-evenly“ auf beiden Seiten zwei Lücken mehr aufweist als „space-between“, während das erste und das letzte untergeordnete Element von „space-between“ nahe am Rand des Containers liegen.

Um diese Lücke zu füllen, können wir zwei Pseudoelemente verwenden, die es dem Container ermöglichen, bei Einstellung auf space-between sieben untergeordnete Elemente zu haben, was bedeutet, dass „sechs Lücken“ entstehen:

|偽--子--子--子--子--子--偽|

Code:

.container {
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;

  &:vor,
  &:nach {
    Inhalt: '';
    Anzeige: Block;
  }
}

Damit ist dieser Artikel über zwei Methoden zur Lösung von Problemen mit der gleichmäßigen Raumkompatibilität abgeschlossen. Weitere Inhalte zur gleichmäßigen Raumkompatibilität finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!