CSS-tricks för flexbox är viktiga för att justera, designa och placera behållaren med hjälp av flexbox och andra CSS Flexbox-trickegenskaper. CSS-tricks egenskaper och värden för flera egenskaper används för flexboxdesign och dess data. Vi kan använda CSS-trick för att ställa in justering, position, utrymme och andra mönster för flexbox.

Följande CSS-tricksformat används för att designa flexbox.

• CSS-trick för Flecbox-riktning
• CSS-trick för Flexbox-justering
• CSS-trick för Flexbox-marginal

Flex riktning

Flex-riktningen används för att få riktningen på behållaren inuti flexboxen. Vi kan ställa in behållarna efter behov.

Syntax:

Följande syntax använder CSS-tricken för flexbox. Vi kan använda andra CSS-egenskaper för flex-riktningen.

 display: flex; flex-direction: row | row-reverse | column | column-reverse; 

Beskrivning:

• Vi kan använda displayen med flex som standard för behållaren eller elementet.
• Flex direction använder CSS-egenskapen med rad-, kolumn- och omvändvärden.

Exempel på Flex-direction

Följande exempel visar flexboxen med visa Flex-egenskaper och -värden. Vi kan justera innehåll, anpassning och riktningar.

Exempel 1:

Följande exempel visar flexriktningen med rad, justering och innehåll med startpositionen som standard.

 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

Exempel 2:

Följande exempel visar flexriktningen med rad omvänd, och innehållet visar startpositionen som standard. Den omvända raden visar taggen från ände till start med horisontell inriktning.

 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

Exempel 3:

Följande exempel visar flexriktningen med kolumn, justering och innehåll med startpositionen som standard. Kolumnen visar taggar från början till slut med vertikal inriktning.

 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 

Produktion:

gör medan du är i java

Utdatan visar flexboxen med CSS-trick.

Exempel 4:

Följande exempel visar flexriktningen med kolumnomvänd, och justering visas med startpositionen som standard. Den omvända kolumnen visar taggen från början till början med vertikal inriktning.

 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

Flex Alignment Tricks

Flexen använder justering och innehållsposition med CSS-trick eller egenskaper.

Syntax:

Följande syntax använder CSS-tricken för flexbox-justering.

 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; 

Beskrivning:

• Vi kan använda displayen med flex som standard för behållaren eller elementet.
• Flexbox-justeringen ställs in med start-, slut-, center- och andra CSS-trickvärden.
• Innehållet ställs in i flexboxen med egenskapen 'justify-content'.

Exempel

Följande exempel visar innehållet och flexbox-positionen med olika värden.

Exempel 1:

Följande exempel visar flex-riktningen med raden, inriktning mot slutet och justera-innehållet visas med slutpositionen.

 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

Exempel 2:

Flexboxen visar behållaren i mittläget med egenskapen 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

Exempel 3:

Flexboxen använder egenskapen justify-content för att visa behållaren med utrymmet runt taggen.

 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

var är webbläsarinställningarna

Exempel 4:

Flexboxen använder egenskapen justify-content för att visa behållaren med utrymmet runt taggen. Vi kan använda displayen med ett inline flexvärde av fastigheten.

 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 

Produktion:

Utdatan visar flexboxen med CSS-trick.

CSS-trick för Flexbox Margin

Vi kan ställa in marginalen och utfyllnaden till Flexbox och dess underordnade box med hjälp av CSS-egenskaper. Vi kan ställa in grundläggande flexbox CSS-tricks och deras värde för displayboxen. Lägg sedan till CSS-egenskapen för att ställa in marginalen för flexboxens underordnade element.

blockera YouTube-annonser för Android

Syntax

Följande syntax används på flexboxens underordnade element för att ställa in marginalen.

 Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } 

Exempel

Följande exempel ställer in marginalen och designen med hjälp av CSS-trick med underordnade element.

Exempel 1:

Följande exempel ställer in marginalen och utfyllnaden för det första elementet i flexbox-behållaren. Vi kan ställa in marginalvärdet, teckenstorleken och bakgrundsfärgen för att matcha det önskade värdet.

 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 

Produktion:

Utdata visar marginalen för det första elementet.

Exempel 2:

Följande exempel ställer in marginalen och utfyllnaden för det tredje elementet i flexbox-behållaren. Vi kan ställa in värdet på margin-auto med de olika bakgrundsfärgerna.

 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 

Produktion:

Utdata visar marginalen för det första elementet.

Exempel 3:

Följande exempel ställer in marginalen och utfyllnaden för det sista elementet i flexbox-behållaren.

 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 

Produktion:

Utdata visar marginalen för det första elementet.

Slutsats

CSS-tricken använder egenskaperna och deras värde för att ställa in flexbox-designen. Vi kan använda flera mönster och knep för att få det format som krävs för CSS flexbox.