CSS-Tricks für Flexbox sind wichtig, um den Container mithilfe von Flexbox und anderen CSS-Flexbox-Trickeigenschaften anzupassen, zu gestalten und zu positionieren. CSS-Tricks-Eigenschaft und mehrere Eigenschaftswerte werden für das Flex-Box-Design und seine Daten verwendet. Wir können CSS-Tricks verwenden, um Ausrichtung, Position, Abstand und andere Designs für Flexbox festzulegen.
Das folgende CSS-Trickformat wird zum Entwerfen von Flexbox verwendet.
- CSS-Tricks für die Flecbox-Richtung
- CSS-Tricks für die Flexbox-Ausrichtung
- CSS-Tricks für den Flexbox-Marge
Flex-Richtung
Die Flexrichtung wird verwendet, um die Richtung des Containers innerhalb der Flexbox zu ermitteln. Wir können die Container nach Bedarf einstellen.
Syntax:
Die folgende Syntax verwendet die CSS-Tricks für Flexbox. Wir können andere CSS-Eigenschaften für die Flex-Richtung verwenden.
display: flex; flex-direction: row | row-reverse | column | column-reverse;
Beschreibung:
- Wir können die Anzeige standardmäßig mit Flex für den Container oder das Element verwenden.
- Die Flex-Richtung verwendet die CSS-Eigenschaft mit den Zeilen-, Spalten- und Umkehrwerten.
Beispiele für Flex-Richtung
Die folgenden Beispiele zeigen die Flexbox mit Anzeige-Flex-Eigenschaften und -Werten. Wir können Inhalt, Ausrichtung und Richtung anpassen.
Beispiel 1:
Die folgenden Beispiele zeigen die Flex-Richtung mit Zeile, Ausrichtung und Inhalt standardmäßig mit der Startposition.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Beispiel 2:
Die folgenden Beispiele zeigen die Flex-Richtung mit Zeilenumkehr und der Inhalt zeigt standardmäßig die Startposition. Die umgekehrte Zeile zeigt das End-to-Start-Tag mit horizontaler Ausrichtung.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Beispiel 3:
Die folgenden Beispiele zeigen die Flex-Richtung mit Spalte, Ausrichtung und Inhalt standardmäßig mit der Startposition. Die Spalte zeigt Anfang-zu-Ende-Tags mit vertikaler Ausrichtung.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
bin nach bcd
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Beispiel 4:
Die folgenden Beispiele zeigen die Flexrichtung mit Spaltenumkehr und die Ausrichtung erfolgt standardmäßig mit der Startposition. Die Spaltenrückseite zeigt das End-to-Start-Tag mit vertikaler Ausrichtung.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column-reverse; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Tricks zur Flex-Ausrichtung
Der Flex verwendet Ausrichtung und Inhaltsposition mit CSS-Tricks oder -Eigenschaften.
Syntax:
Die folgende Syntax verwendet die CSS-Tricks für die Flexbox-Ausrichtung.
display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; align-self: flex-start | flex-end | center | baseline | stretch; justify-content: start | end | center | space-between | space-around | space-evenly;
Beschreibung:
- Wir können die Anzeige standardmäßig mit Flex für den Container oder das Element verwenden.
- Die Flexbox-Ausrichtung wird mit Start, Ende, Mitte und anderen CSS-Trickwerten festgelegt.
- Der Inhalt wird in der Flexbox mit der Eigenschaft „justify-content“ eingestellt.
Beispiele
Die folgenden Beispiele zeigen den Inhalt und die Flexbox-Position mit unterschiedlichen Werten.
Beispiel 1:
Die folgenden Beispiele zeigen die Flex-Richtung mit der Zeile, die Ausrichtung mit dem Ende und den Justify-Inhalt mit der Endposition.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: end; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Beispiel 2:
Die Flexbox zeigt den Container in der Mittelposition mit der Eigenschaft justify-content.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; align-self: flex-end; justify-content: center; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Beispiel 3:
Die Flexbox verwendet die Eigenschaft „justify-content“, um den Container mit dem Leerraum um das Tag herum anzuzeigen.
Logik 1. Ordnung
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
Beispiel 4:
Die Flexbox verwendet die Eigenschaft „justify-content“, um den Container mit dem Leerraum um das Tag herum anzuzeigen. Wir können die Anzeige mit einem Inline-Flex-Wert der Eigenschaft verwenden.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: inline-flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt die Flexbox mit CSS-Tricks.
CSS-Tricks für Flexbox Margin
Mithilfe von CSS-Eigenschaften können wir den Rand und den Abstand für Flexbox und seine untergeordnete Box festlegen. Wir können grundlegende Flexbox-CSS-Tricks und deren Wert für das Anzeigefeld festlegen. Fügen Sie anschließend die CSS-Eigenschaft hinzu, um den Rand des untergeordneten Elements der Flexbox festzulegen.
String in int in Java umwandeln
Syntax
Die folgende Syntax wird für das untergeordnete Element der Flexbox verwendet, um den Rand festzulegen.
Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } Beispiele
Die folgenden Beispiele legen den Rand und das Design mithilfe von CSS-Tricks mit untergeordneten Elementen fest.
Beispiel 1:
Das folgende Beispiel legt den Rand und den Abstand des ersten Elements des Flexbox-Containers fest. Wir können den Randwert, die Schriftgröße und die Hintergrundfarbe so einstellen, dass sie dem erforderlichen Wert entsprechen.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers > div:first-child { background-color: red; margin: 20px; padding: 30px; font-size: 25px; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> The first child of flexbox set with different CSS tricks </p> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt den Rand des ersten Elements.
Beispiel 2:
Das folgende Beispiel legt den Rand und den Abstand des dritten Elements des Flexbox-Containers fest. Wir können den Wert von margin-auto mit den verschiedenen Hintergrundfarben festlegen.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers > div:last-child { background-color: yellow; margin-left: auto; padding: 10px; font-size: 25px; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Ausgabe:
Die Ausgabe zeigt den Rand des ersten Elements.
Beispiel 3:
Das folgende Beispiel legt den Rand und den Abstand des letzten Elements des Flexbox-Containers fest.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers > .clip3{ background-color: orange; margin: auto; padding: 10px; font-size: 25px; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Study Ausgabe:
Die Ausgabe zeigt den Rand des ersten Elements.
Abschluss
Die CSS-Tricks nutzen die Eigenschaften und deren Werte, um das Flexbox-Design festzulegen. Wir können mehrere Designs und Tricks verwenden, um das erforderliche Format der CSS-Flexbox zu erhalten.