CSS gudrybės, skirtos „flexbox“, yra būtinos norint koreguoti, suprojektuoti ir išdėstyti konteinerį naudojant „flexbox“ ir kitas CSS „Flexbox“ gudrybių savybes. CSS triukų ypatybės ir kelių savybių reikšmės naudojamos lanksčiojo dėžutės dizainui ir jo duomenims. Galime naudoti CSS gudrybes, norėdami nustatyti lygiavimą, padėtį, erdvę ir kitus „flexbox“ dizainus.

Šis CSS gudrybių formatas naudojamas kuriant „flexbox“.

• CSS gudrybės Flecbox kryptimi
• CSS gudrybės, skirtos „Flexbox“ derinimui
• CSS gudrybės, skirtos „Flexbox“ paraštei

Lanksti kryptis

Lanksčioji kryptis naudojama norint nustatyti talpyklos kryptį lanksčiojo dėžutės viduje. Mes galime nustatyti konteinerius pagal reikalavimą.

Sintaksė:

Šioje sintaksėje naudojami „flexbox“ CSS gudrybės. Lanksčiai krypčiai galime naudoti kitas CSS ypatybes.

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

Apibūdinimas:

• Pagal numatytuosius nustatymus konteineriui ar elementui galime naudoti ekraną su flex.
• Flex direction naudoja CSS ypatybę su eilutės, stulpelio ir atvirkštinės reikšmėmis.

„Flex“ krypties pavyzdžiai

Šiuose pavyzdžiuose parodytas „flexbox“ su „Flex“ ypatybėmis ir reikšmėmis. Galime koreguoti turinį, derinimą ir kryptis.

1 pavyzdys:

Toliau pateikti pavyzdžiai rodo lanksčią kryptį su eilute, lygiavimu ir turiniu su pradine padėtimi pagal numatytuosius nustatymus.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

2 pavyzdys:

Toliau pateikti pavyzdžiai rodo lanksčią kryptį su eilute atvirkščiai, o turinys pagal numatytuosius nustatymus rodo pradinę padėtį. Atvirkštinėje eilutėje rodoma žyma nuo pabaigos iki pradžios su horizontaliu lygiavimu.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

3 pavyzdys:

Šie pavyzdžiai rodo lanksčią kryptį su stulpeliu, lygiavimu ir turiniu su pradine padėtimi pagal numatytuosius nustatymus. Stulpelyje rodomos žymos nuo pradžios iki pabaigos su vertikaliu lygiavimu.

 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 

Išvestis:

char tostring java

Išvestis rodo „flexbox“ su CSS gudrybėmis.

4 pavyzdys:

Toliau pateikti pavyzdžiai rodo lankstumo kryptį su stulpelio atvirkštine padėtimi, o lygiavimas pagal numatytuosius nustatymus rodomas su pradine padėtimi. Stulpelio reversas rodo žymą nuo pabaigos iki pradžios su vertikaliu lygiavimu.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

Flex Alignment gudrybės

„Flex“ naudoja lygiavimą ir turinio padėtį su CSS gudrybėmis ar savybėmis.

Sintaksė:

Toliau pateiktoje sintaksėje naudojami CSS gudrybės, skirtos „flexbox“ lygiavimui.

 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; 

Apibūdinimas:

• Pagal numatytuosius nustatymus konteineriui ar elementui galime naudoti ekraną su flex.
• „Flexbox“ lygiavimas nustatomas naudojant pradžios, pabaigos, centro ir kitas CSS gudrybės reikšmes.
• Turinys nustatomas lanksčiame laukelyje su ypatybe „justify-content“.

Pavyzdžiai

Toliau pateikti pavyzdžiai rodo turinį ir lanksčiosios dėžutės padėtį su skirtingomis reikšmėmis.

1 pavyzdys:

Tolesniuose pavyzdžiuose parodyta lankstymo kryptis su eilute, sulygiavimas su pabaiga ir išlyginimo turinys, rodomas su galine padėtimi.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

2 pavyzdys:

Lanksčiame langelyje konteineris rodomas vidurinėje padėtyje su ypatybe išteisinti turinį.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

3 pavyzdys:

„Flexbox“ naudoja ypatybę justify-content, kad parodytų sudėtinį rodinį su tarpu aplink žymą.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

įmesti į sql

4 pavyzdys:

„Flexbox“ naudoja ypatybę justify-content, kad parodytų sudėtinį rodinį su tarpu aplink žymą. Galime naudoti ekraną su tiesiogine nuosavybės lankstumo verte.

 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 

Išvestis:

Išvestis rodo „flexbox“ su CSS gudrybėmis.

„Flexbox“ maržos CSS gudrybės

Naudodami CSS ypatybes galime nustatyti paraštę ir užpildymą į „Flexbox“ ir jo antrinį laukelį. Galime nustatyti pagrindinius „flexbox“ CSS triukus ir jų reikšmę rodymo laukeliui. Po to pridėkite CSS ypatybę, kad nustatytumėte „flexbox“ antrinio elemento paraštę.

įmonė prieš įmonę

Sintaksė

Ši sintaksė naudojama antriniam „flexbox“ elementui, kad būtų galima nustatyti paraštę.

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

Pavyzdžiai

Toliau pateikti pavyzdžiai nustato paraštę ir dizainą naudojant CSS gudrybes su antriniais elementais.

1 pavyzdys:

Toliau pateiktame pavyzdyje nustatomos pirmojo „flexbox“ sudėtinio rodinio elemento paraštės ir užpildymas. Galime nustatyti paraštės reikšmę, šrifto dydį ir fono spalvą, kad ji atitiktų reikiamą reikšmę.

 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 

Išvestis:

Išvestis rodo pirmojo elemento paraštę.

2 pavyzdys:

Šiame pavyzdyje nustatoma trečiojo „flexbox“ sudėtinio rodinio elemento paraštė ir užpildymas. Galime nustatyti margin-auto reikšmę skirtingomis fono spalvomis.

 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 

Išvestis:

Išvestis rodo pirmojo elemento paraštę.

3 pavyzdys:

Šiame pavyzdyje nustatoma paskutinio „flexbox“ sudėtinio rodinio elemento paraštė ir užpildymas.

 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 

Išvestis:

Išvestis rodo pirmojo elemento paraštę.

Išvada

CSS gudrybės naudoja savybes ir jų vertę, kad nustatytų „flexbox“ dizainą. Galime naudoti kelis dizainus ir gudrybes, kad gautume reikiamą CSS flexbox formatą.