Die Regeln des flexiblen Layouts umfassen: 1. Deklaration von Containern und Elementen; 3. Ausrichtung und Verteilung; 5. Zeilenumbruch und -verteilung; 7. Querachsenausrichtung; 9. Zusätzliche Regeln für flexible Behälter usw. Ausführliche Einführung: 1. Deklaration von Containern und Artikeln. Container können beliebige Elemente auf Blockebene enthalten und Querachse. ;3. Ausrichtung und Verteilung usw.
Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.
Die Regeln des elastischen Layouts umfassen hauptsächlich die folgenden Aspekte:
1. Deklaration von Containern und Artikeln: Im elastischen Layout werden Container zur Aufnahme von Artikeln verwendet. Der Container kann ein beliebiges Element auf Blockebene sein, beispielsweise ein Div. Deklarieren Sie in CSS ein Element als Flex-Container, indem Sie die Anzeigeeigenschaft auf Flex oder Inline-Flex setzen. Das Element ist das Element, das angeordnet werden muss und kann ein beliebiges untergeordnetes Element sein. Elemente, die das Flex-Layout verwenden, werden automatisch zu Flex-Elementen.
2. Hauptachse und Querachse: Elemente im flexiblen Layout werden auf der Hauptachse und Querachse angeordnet. Die Richtung der Hauptachse hängt vom Wert der Biegerichtungseigenschaft ab, während die Querachse senkrecht zur Hauptachse verläuft. Durch Festlegen der Eigenschaft „flex-direction“ können Sie die Richtung der Hauptachse definieren und so die Anordnungsrichtung von Elementen bestimmen.
3. Ausrichtung und Verteilung: Ausrichtung und Verteilung sind wichtige Regeln im flexiblen Layout. Die Eigenschaft „justify-content“ kann die Ausrichtung von Elementen auf der Hauptachse steuern, während die Eigenschaft „align-items“ die Ausrichtung von Elementen auf der Querachse steuern kann. Diese Eigenschaften können das Element horizontal und vertikal zentrieren, nach links oder rechts verschieben usw.
4. Eigenschaften flexibler Artikel: Zu den Eigenschaften flexibler Artikel gehören Flex-Grow, Flex-Shrink und Flex-Basis. Flex-Grow definiert das Vergrößerungsverhältnis des Elements, wenn nicht genügend Platz vorhanden ist, Flex-Shrink definiert das Schrumpfverhältnis des Elements, wenn überschüssiger Platz vorhanden ist, und Flex-Basis definiert die Standardgröße des Elements. Mit diesen Eigenschaften können Sie die Skalierbarkeit und Größenänderung des Projekts steuern.
5. Zeilenumbruch und Umkehrung: Durch Festlegen des Flex-Wrap-Attributs können Sie steuern, ob das Element umgebrochen wird oder nicht. Bei Einstellung auf „Flex-Wrap: Wrap“ werden Elemente innerhalb des Containers umwickelt. Darüber hinaus können Sie das Flex-Reverse-Attribut verwenden, um die Reihenfolge der Elemente umzukehren und ein umgekehrtes Layout zu implementieren.
6. Raumverteilung und Größenanpassung: Durch Festlegen der Eigenschaften „align-content“ und „justify-content“ können Sie die räumliche Verteilung und Ausrichtung mehrzeiliger Elemente steuern. Darüber hinaus können Sie auch die Eigenschaften „Flex-Basis“, „Flex-Grow“ und „Flex-Shrink“ verwenden, um die Größe des Elements anzupassen und so einen flexibleren Layouteffekt zu erzielen.
7. Querachsenreihenfolge: Im flexiblen Layout kann die Reihenfolge der Elemente nicht nur durch die Hauptachsenrichtung bestimmt werden, sondern auch durch Festlegen der Querachsenreihenfolge. Die Reihenfolge, in der Elemente angeordnet sind, kann mithilfe der Eigenschaften „flex-start“, „flex-end“, „flex-left“ und „flex-right“ definiert werden, die die Start- oder Endposition der Elemente auf der Querachse angeben.
8. Querachsenausrichtung: Die Ausrichtung der Querachse kann individuell über das align-self-Attribut eingestellt werden. Dadurch können wir Elemente auf der Querachse ausrichten und dabei die Ausrichtungseinstellungen im Container überschreiben. Das align-self-Attribut kann auf „Auto“, „Flex-Start“, „Flex-End“, „Mitte“, „Grundlinie“ oder „Streckung“ eingestellt werden.
9. Zusätzliche Regeln für elastische Behälter: Für elastische Behälter müssen einige zusätzliche Regeln beachtet werden. Beispielsweise kann ein Flex-Container die Eigenschaften align-items und justify-content verwenden, um die Ausrichtung von Elementen zu steuern. Darüber hinaus verfügen Flex-Container über einen zusätzlichen Unterpunkt: Flex-Trenner. Mit diesem Trennzeichen können Sie den Abstand zwischen Elementen steuern und das erste Element am Rand des Flex-Containers und das letzte Element am Rand des Flex-Containers ausrichten, indem Sie justify-content: space-between; festlegen.
10. Verschachtelte flexible Container: Im flexiblen Layout können wir einen flexiblen Container in einem anderen flexiblen Container verschachteln. In diesem Fall übernimmt der Innencontainer die Ausrichtung, Hauptachsenausrichtung und Umhüllungseigenschaften des Außencontainers. Allerdings steht die Querachse des Innenbehälters immer senkrecht zur Hauptachse des Außenbehälters.
Das Obige sind die Grundregeln des flexiblen Layouts. Durch die flexible Verwendung dieser Regeln können wir verschiedene komplexe Layouteffekte erzielen. Bei der tatsächlichen Entwicklung müssen wir auch Probleme mit der Browserkompatibilität berücksichtigen, um sicherzustellen, dass unsere Website auf verschiedenen Browsern und Geräten korrekt dargestellt und elastisches Layout verwendet werden kann.
Das obige ist der detaillierte Inhalt vonWas sind die Regeln des flexiblen Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
