Zu den CSS3-Layoutattributen gehören: Flex-Richtung, Flex-Wrap, Flex-Flow, Justify-Content, Align-Items, Align-Content, Order, Flex-Grow, Flex-Shrink usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.
1. Flexibles Box-Modell (Flexible Box oder Flexbox)Das größte Merkmal des Flexbox-Modells besteht darin, dass es die Breite und Höhe von Unterelementen dynamisch ändern kann, um das entsprechende Layout auf Bildschirmen unterschiedlicher Größe zu erfüllen .
(1) Flexible ContainereigenschaftenFlex-Richtung: Legen Sie die Hauptachsenrichtung fest und bestimmen Sie die Anordnung der flexiblen Unterelemente.
Flex-Wrap: Ob umgebrochen werden soll, wenn die flexiblen Unterelemente den Umfang des überschreiten flexibler Container
flex-flow: flex – Abkürzung für Richtungs- und Flex-Wrap-Eigenschaften, zusammengesetzte Eigenschaften
justify-content: Ausrichtung auf der Hauptachse
align-items: Ausrichtung auf der Querachse
align-content: Wenn auf der Querachse Platz ist, seitliche Achsenausrichtung
(2) Flexible Unterelementattributeorder: Steuern Sie die Reihenfolge der Unterelemente im Flex-Container
flex-grow: Legen Sie das Erweiterungsverhältnis fest der flexiblen Unterelemente
flex-shrink: Legen Sie das Schrumpfverhältnis des elastischen Unterelements fest.
flex-basis: Gibt den Standardgrößenwert des elastischen Unterelements vor dem Dehnen an, äquivalent zu den Breiten- und Höhenattributen
flex : Das zusammengesetzte Attribut der Attribute „Flex-Grow“, „Flex-Shrink“ und „Flex-Basis“
align-self : Erlaubt unabhängigen flexiblen Unterelementen, die Standardausrichtungseinstellungen des flexiblen Containers zu überschreiben
Flexbox-Menüpunkt „Echtkampf“
.menu{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; } .menu li{ height: 40px; text-align: center; line-height: 40px; flex: 1 1 100%; } .menu li:nth-child(1){ background-color: #39ADD1; } .menu li:nth-child(2){ background-color: #3079AB; } .menu li:nth-child(3){ background-color: #982551; } .menu li:nth-child(4){ background-color: #E15258; } .menu li:nth-child(5){ background-color: #CC6699; } .menu li:nth-child(6){ background-color: #52AC43; } @media (min-width:480px) { .menu li{ flex: 1 1 50%; } } @media (min-width:768px) { .menu{ flex-flow: row nowrap; } }
2. Detaillierte Erklärung für mehrere SpaltenAttributliste:
Spaltenbreite: Legen Sie die Breite fest jeder Spalte
column-count: Legen Sie die Anzahl der Spalten fest
column-gap: Legen Sie den Abstand zwischen den Spalten fest
column-rule: Zusammengesetzte Eigenschaften (Spaltenregelbreite, Spaltenregelstil, Spaltenregelstil) Farbe), legen Sie den Rahmenstil zwischen den Spalten fest
column-fill: Legen Sie fest, ob die Spaltenhöhe einheitlich ist
column-span: Legen Sie fest, ob sie sich über alle Spalten erstreckt
3. Best Practice:
/*超小屏幕(手机,小于768px)*/ /*没有任何媒体查询相关的代码,移动设备优先*/ /*小屏幕(平板,大小等于768)*/ @media (min-width: 768px) { } /*中等屏幕(桌面显示器,大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕(大桌面显示器,大于等于1200px)*/ @media (min-width: 1200px) { }
,
Web-Frontend-Einführungs-TutorialDas obige ist der detaillierte Inhalt vonWas sind die CSS3-Layouteigenschaften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!