Einführung in Flex-Layoutelemente in CSS (mit Code)

Der Inhalt dieses Artikels ist eine Einführung in die Flex-Layout-Elemente in CSS (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Das Flex-Layout ist „elastisches Layout“, und jedes Element kann als Flex-Layout angegeben werden, indem das CSS-Attribut display:flex; webkit kernel browser is display: -webkit-flex; .
Ein Element, das das Flex-Layout verwendet, wird als „Flex-Container“ bezeichnet, und alle seine Unterelemente werden als Flex-Elemente bezeichnet Der Auswahlwert für die Anordnungsrichtung der Elemente: Zeile (Standardwert: von links nach rechts) | Spalte (von oben nach unten) |
flex-wrap

Definieren Sie, ob das Element umgebrochen werden soll: nowrap (Standardwert: kein Zeilenumbruch) | Wrap, erste Zeile unten)

.box {
     flex-direction: row | row-reverse | column | column-reverse;
}

flex-flow

ist die Abkürzung für Flex-Direction-Attribut und Flex-Wrap-Attribut. Der Standardwert ist row nowrap

 .box{
     flex-wrap: nowrap | wrap | wrap-reverse;
   }

justify-content

Definiert die Ausrichtung des Elements auf der Hauptachse. Wählen Sie den Wert „flex-start“ (standardmäßig linksbündig) |. flex-end (rechtsbündig) |

.box {
     flex-flow: <flex-direction> || <flex-wrap>;
   }

align-items

definiert, wie Elemente auf der Querachse ausgerichtet werden. Wählen Sie die Werte Flex-Start (Ausrichtung des Startpunkts der Querachse) |. Flex-End (Ausrichtung des Endpunkts der Querachse) | der ersten Textzeile des Elements) |. stretch (Element Wenn die Höhe nicht festgelegt oder auf „Auto“ eingestellt ist, nimmt sie die gesamte Höhe des Containers ein)

.box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
   }

align-content

definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat.

 .box {
 align-items: flex-start | flex-end | center | baseline | stretch;
 }

Eigenschaften des Artikels

Bestellung

.box {
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

flex-grow

.item {
  order: <integer>;
}

flex-shrink

.item {
  flex-grow: <number>; /* default 0 */
}

flex-basis

.item {
  flex-shrink: <number>; /* default 1 */
}

flex

.item {
  flex-basis: <length> | auto; /* default auto */
}

align-self

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

Das obige ist der detaillierte Inhalt vonEinführung in Flex-Layoutelemente in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!