CSS triki flexbox ir būtiski, lai pielāgotu, izstrādātu un novietotu konteineru, izmantojot flexbox un citus CSS Flexbox triku rekvizītus. CSS triku īpašība un vairāku rekvizītu vērtības tiek izmantotas elastīgās kastes dizainam un tā datiem. Mēs varam izmantot CSS trikus, lai iestatītu flexbox līdzinājumu, pozīciju, atstarpi un citus dizainus.
Flexbox projektēšanai tiek izmantots šāds CSS triku formāts.
- CSS triki Flecbox virzienam
- CSS triki Flexbox līdzināšanai
- CSS triki Flexbox rezervei
Flex virziens
Elastības virziens tiek izmantots, lai iegūtu tvertnes virzienu flexbox iekšpusē. Mēs varam iestatīt konteinerus atbilstoši prasībām.
Sintakse:
Tālāk norādītajā sintakse izmanto CSS trikus flexbox. Flex virzienam varam izmantot citus CSS rekvizītus.
display: flex; flex-direction: row | row-reverse | column | column-reverse;
Apraksts:
- Mēs varam izmantot displeju ar flex pēc noklusējuma konteineram vai elementam.
- Flex direction izmanto CSS rekvizītu ar rindu, kolonnu un apgrieztām vērtībām.
Flex virziena piemēri
Šajos piemēros ir parādīts flexbox ar displeja Flex rekvizītiem un vērtībām. Mēs varam pielāgot saturu, līdzinājumu un virzienus.
1. piemērs:
Šajos piemēros pēc noklusējuma ir parādīts elastīgais virziens ar rindu, līdzinājumu un saturu ar sākuma pozīciju.
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 Izvade:
Izvade parāda flexbox ar CSS trikiem.
2. piemērs:
Šajos piemēros ir parādīts elastīgais virziens ar rindas apvērsumu, un saturs pēc noklusējuma parāda sākuma pozīciju. Apgrieztajā rindā ir redzams tags no sākuma līdz sākumam ar horizontālu līdzinājumu.
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 Izvade:
Izvade parāda flexbox ar CSS trikiem.
3. piemērs:
Šajos piemēros ir parādīts elastīgais virziens ar kolonnu, līdzinājums un saturs ar sākuma pozīciju pēc noklusējuma. Kolonnā tiek rādīti tagi no sākuma līdz beigām ar vertikālu līdzinājumu.
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 Izvade:
java iegūt pašreizējo laiku
Izvade parāda flexbox ar CSS trikiem.
4. piemērs:
Šajos piemēros parādīts elastīgais virziens ar kolonnas apvērsumu, un līdzinājums pēc noklusējuma tiek rādīts ar sākuma pozīciju. Kolonnas otrā pusē ir redzams tags no sākuma līdz sākumam ar vertikālu līdzinājumu.
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 Izvade:
pievienot masīvam Java
Izvade parāda flexbox ar CSS trikiem.
Flex Alignment triki
Elastība izmanto izlīdzināšanu un satura pozīciju ar CSS trikiem vai īpašībām.
Sintakse:
Tālāk norādītajā sintakse izmanto CSS trikus flexbox līdzināšanai.
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;
Apraksts:
- Mēs varam izmantot displeju ar flex pēc noklusējuma konteineram vai elementam.
- Flexbox līdzinājums tiek iestatīts ar sākuma, beigu, centra un citām CSS triku vērtībām.
- Saturs tiek iestatīts elastīgajā lodziņā ar rekvizītu “justify-content”.
Piemēri
Šajos piemēros ir parādīts saturs un flexbox pozīcija ar dažādām vērtībām.
1. piemērs:
Šajos piemēros ir parādīts elastīguma virziens ar rindu, izlīdzinājums ar beigām un taisnošanas saturs, kas parādīts ar gala pozīciju.
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 Izvade:
Izvade parāda flexbox ar CSS trikiem.
2. piemērs:
Flexbox parāda konteineru vidējā pozīcijā ar rekvizītu 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 Izvade:
Izvade parāda flexbox ar CSS trikiem.
3. piemērs:
Flexbox izmanto rekvizītu justify-content, lai parādītu konteineru ar atstarpi ap tagu.
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 Izvade:
Izvade parāda flexbox ar CSS trikiem.
4. piemērs:
Flexbox izmanto rekvizītu justify-content, lai parādītu konteineru ar atstarpi ap tagu. Mēs varam izmantot displeju ar īpašuma iekļauto elastības vērtību.
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 Izvade:
Izvade parāda flexbox ar CSS trikiem.
CSS triki Flexbox Margin
Izmantojot CSS rekvizītus, mēs varam iestatīt piemali un polsterējumu uz Flexbox un tā pakārtoto lodziņu. Mēs varam iestatīt pamata flexbox CSS trikus un to vērtību displeja lodziņā. Pēc tam pievienojiet CSS rekvizītu, lai iestatītu flexbox bērna elementa rezervi.
bloķēt youtube reklāmas Android
Sintakse
Lai iestatītu piemali, flexbox bērna elementam tiek izmantota šāda sintakse.
Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } Piemēri
Šajos piemēros tiek iestatīta piemale un dizains, izmantojot CSS trikus ar pakārtotajiem elementiem.
1. piemērs:
Nākamajā piemērā ir iestatīta flexbox konteinera pirmā elementa piemale un polsterējums. Mēs varam iestatīt piemales vērtību, fonta lielumu un fona krāsu, lai tā atbilstu vajadzīgajai vērtībai.
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 Izvade:
Izvade parāda pirmā elementa malu.
2. piemērs:
Nākamajā piemērā ir iestatīta flexbox konteinera trešā elementa piemale un polsterējums. Mēs varam iestatīt margin-auto vērtību ar dažādām fona krāsām.
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 Izvade:
Izvade parāda pirmā elementa malu.
3. piemērs:
Nākamajā piemērā ir iestatīta flexbox konteinera pēdējā elementa piemale un polsterējums.
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 Izvade:
Izvade parāda pirmā elementa malu.
Secinājums
CSS triki izmanto rekvizītus un to vērtību, lai iestatītu flexbox dizainu. Mēs varam izmantot vairākus dizainus un trikus, lai iegūtu nepieciešamo CSS flexbox formātu.