logo

CSS-tricks til Flexbox

CSS-tricks til flexbox er afgørende for at justere, designe og placere beholderen ved hjælp af flexbox og andre CSS Flexbox-trickegenskaber. CSS-tricks egenskaber og værdier for flere egenskaber bruges til flex box design og dets data. Vi kan bruge CSS-tricks til at indstille justering, position, plads og andre designs til flexbox.

Følgende CSS-tricks-format bruges til at designe flexbox.

  • CSS-tricks til Flecbox-retning
  • CSS-tricks til Flexbox-justering
  • CSS-tricks til Flexbox-margin

Flex retning

Flex-retningen bruges til at få retningen på beholderen inde i flexboxen. Vi kan indstille beholderne efter behov.

Syntaks:

Følgende syntaks bruger CSS-tricks til flexbox. Vi kan bruge andre CSS-egenskaber til flex-retningen.

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

Beskrivelse:

  • Vi kan bruge displayet med flex som standard for beholderen eller elementet.
  • Flex-retning bruger CSS-egenskaben med række-, kolonne- og omvendte værdier.

Eksempler på Flex-retning

Følgende eksempler viser flexbox med display Flex egenskaber og værdier. Vi kan justere indhold, justering og retninger.

Eksempel 1:

De følgende eksempler viser flex-retningen med række, justering og indhold 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:

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

Eksempel 2:

De følgende eksempler viser flex-retningen med række modsat, og indholdet viser startpositionen som standard. Den omvendte række viser ende-til-start-mærket med vandret justering.

 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:

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

Eksempel 3:

De følgende eksempler viser flex-retningen med kolonne, justering og indhold med startpositionen som standard. Kolonnen viser start-til-slut-tags med lodret justering.

 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:

powershell kommentar multiline

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

Eksempel 4:

De følgende eksempler viser flex-retningen med kolonne modsat, og justering viser med startpositionen som standard. Den omvendte kolonne viser ende-til-start-tagget med lodret justering.

 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:

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

Flex Alignment Tricks

Flexen bruger justering og indholdsposition med CSS-tricks eller egenskaber.

Syntaks:

Følgende syntaks bruger CSS-tricks til 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; 

Beskrivelse:

  • Vi kan bruge displayet med flex som standard for beholderen eller elementet.
  • Flexbox-justeringen er indstillet med start-, slut-, center- og andre CSS-trickværdier.
  • Indholdet indstilles i flexbox med egenskaben 'justify-content'.

Eksempler

Følgende eksempler viser indholdet og flexbox-positionen med forskellige værdier.

Eksempel 1:

De følgende eksempler viser flex-retningen med rækken, justering med slutningen og justify-content vist med endepositionen.

 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:

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

Eksempel 2:

Flexboxen viser beholderen i midterpositionen med egenskaben 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:

Outputtet viser flexboxen med CSS-tricks.

java connect med mysql
CSS-tricks til Flexbox

Eksempel 3:

Flexboxen bruger egenskaben justify-content til at vise containeren med mellemrummet omkring tagget.

 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:

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

Eksempel 4:

Flexboxen bruger egenskaben justify-content til at vise containeren med mellemrummet omkring tagget. Vi kan bruge displayet med en inline flex værdi af ejendommen.

 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:

Outputtet viser flexboxen med CSS-tricks.

CSS-tricks til Flexbox

CSS-tricks til Flexbox Margin

Vi kan indstille margen og polstring til Flexbox og dens underordnede boks ved hjælp af CSS-egenskaber. Vi kan indstille grundlæggende flexbox CSS-tricks og deres værdi for displayboksen. Tilføj derefter CSS-egenskaben for at indstille marginen for flexboxens underordnede element.

npm cache ryddes

Syntaks

Følgende syntaks bruges på det underordnede element i flexboxen til at indstille marginen.

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

Eksempler

Følgende eksempler angiver margen og design ved hjælp af CSS-tricks med underordnede elementer.

Eksempel 1:

Følgende eksempel angiver margenen og polstringen for det første element i flexbox-beholderen. Vi kan indstille margenværdien, skriftstørrelsen og baggrundsfarven til at matche den krævede værdi.

 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:

Outputtet viser marginen for det første element.

CSS-tricks til Flexbox

Eksempel 2:

Det følgende eksempel angiver margenen og polstringen for det tredje element i flexbox-beholderen. Vi kan indstille værdien af ​​margin-auto med de forskellige baggrundsfarver.

 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:

Outputtet viser marginen for det første element.

CSS-tricks til Flexbox

Eksempel 3:

Følgende eksempel angiver margenen og polstringen for det sidste element i flexbox-beholderen.

 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:

Outputtet viser marginen for det første element.

CSS-tricks til Flexbox

Konklusion

CSS-trickene bruger egenskaberne og deres værdi til at indstille flexbox-designet. Vi kan bruge flere designs og tricks for at få det nødvendige format af CSS flexbox.