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 &gt; 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 &gt; 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 &gt; 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.

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 &gt; 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 &gt; 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 &gt; 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.

 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 &gt; 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 &gt; 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.

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 &gt; div:first-child { background-color: red; margin: 20px; padding: 30px; font-size: 25px; } .flex-containers &gt; 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 &gt; div:last-child { background-color: yellow; margin-left: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; 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 &gt; .clip3{ background-color: orange; margin: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; 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.