Dieses Mal werde ich Ihnen das Layout des Anzeigeattributs in CSS3 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Layout des Anzeigeattributs in CSS3? ein Blick.
Ich habe kürzlich etwas über WeChat-Miniprogramme gelernt. Beim Entwerfen des Layouts der Homepage bin ich auf eine neue Layoutmethode gestoßen, display:flex
.container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #b3d4db;
}Der Effekt nach der Kompilierung ist sehr offensichtlich, und auch das Layout der Benutzeroberfläche ist sinnvoll und sieht klar aus. Wofür wird dieses Attribut verwendet?
Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um maximale Flexibilität für kastenförmige Modelle zu bieten. Nach der Einstellung auf das Flex-Layout sind die Attribute float, clear und vertical-align der untergeordneten Elemente ungültig.
Es kann auf Container oder Inline-Elemente angewendet werden. (Die obige Beschreibung wird mit der Beschreibung des WeChat-Entwicklertools kombiniert.) Im Jahr 2009 schlug W3C eine neue Lösung vor – Flex-Layout, mit der verschiedene Seitenlayouts einfach, vollständig und reaktionsschnell implementiert werden können. Derzeit wird es von allen Browsern unterstützt, was bedeutet, dass die Verwendung dieser Funktion jetzt sicher ist.
Elemente, die das Flex-Layout verwenden, werden als Flex-Container (Flex-Container) oder kurz „Container“ bezeichnet. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen (Flex-Elementen), die als „Elemente“ bezeichnet werden. Der Container verfügt standardmäßig über zwei Achsen: die horizontale Hauptachse und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart bezeichnet, und die Endposition wird als Hauptende bezeichnet; die Startposition der Querachse wird als Queranfang bezeichnet, und die Endposition wird als Querende bezeichnet. Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Projekt eingenommene Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und der von einem einzelnen Element eingenommene Raum auf der Querachse wird als Quergröße bezeichnet.
Die folgenden 6 Eigenschaften werden für den Container festgelegt:
flex-direction Die Anordnungsrichtung der Elemente im Container ( horizontale Standardanordnung)
flex-wrap Die Art und Weise, wie Elemente im Container umwickelt werden >
justify-content Wie Elemente auf der Hauptachse ausgerichtet werdenalign-items Wie Elemente auf der Querachse ausgerichtet werden
flex-wrap
.box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }Der Bereich der optionalen Werte des Attributs ist nowrap (Standard) ohne Wrapping, Wrap Wrapping (erste Zeile). ist oben) und Wrap- Reverse (Sie wissen schon ~)
Flex-Flow
.box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }Verbinden Sie im Schreibattribut einfach die Werte von die beiden oben genannten Methoden mit ||.
justify-content
.box { 2 flex-flow: <flex-direction> || <flex-wrap>; 3 }Die Ausrichtung des Elements auf der Hauptachse (welche Achse die Hauptachse ist, hängt davon ab). Einstellung des Attributs Flex-Richtung)
Flex-Start: Von links oder oben auf der Hauptachse anordnenFlex-End: Von rechts oder unten auf der Hauptachse anordnen
.box { 2 justify-content: flex-start | flex-end | center | space-between | space-around; 3 }align-items
Die Bilder erklären es direkt deutlicher
.box { 2 align-items: flex-start | flex-end | center | baseline | stretch; 3 }
Das Obige hat die Attribute im Container eingeführt. Lassen Sie uns über die Attribute der Elemente im Container sprechen:
order 项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order
.item {
order: <integer>;
}flex-grow
.item {
flex-grow: <number>; /* default 0 */
}flex-shrink
.item {
flex-shrink: <number>; /* default 1 */
}flex-basis
.item {
flex-basis: <length> | auto; /* default auto */
}flex
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Anzeigeattribut-Layouts in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
