Els trucs CSS per a flexbox són essencials per ajustar, dissenyar i posicionar el contenidor mitjançant flexbox i altres propietats de trucs CSS Flexbox. La propietat de trucs CSS i els valors de múltiples propietats s'utilitzen per al disseny de la caixa flexible i les seves dades. Podem utilitzar trucs CSS per establir l'alineació, la posició, l'espai i altres dissenys per a flexbox.
El següent format de trucs CSS s'utilitza per dissenyar flexbox.
- Trucs CSS per a la direcció de Flecbox
- Trucs CSS per a l'alineació de Flexbox
- Trucs CSS per al marge de Flexbox
Direcció flexible
La direcció flexible s'utilitza per obtenir la direcció del contenidor dins de la caixa flexible. Podem configurar els contenidors segons el requisit.
Sintaxi:
La sintaxi següent utilitza els trucs CSS per a flexbox. Podem utilitzar altres propietats CSS per a la direcció flexible.
display: flex; flex-direction: row | row-reverse | column | column-reverse;
Descripció:
- Podem utilitzar la pantalla amb flex per defecte per al contenidor o element.
- Flex direction utilitza la propietat CSS amb els valors de fila, columna i invers.
Exemples de Flex-direction
Els exemples següents mostren el flexbox amb propietats i valors Flex de visualització. Podem ajustar el contingut, l'alineació i les direccions.
Exemple 1:
Els exemples següents mostren la direcció flexible amb fila, alineació i contingut amb la posició inicial per defecte.
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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
Exemple 2:
Els exemples següents mostren la direcció flexible amb la fila inversa i el contingut mostra la posició inicial per defecte. La fila inversa mostra l'etiqueta de final a principi amb alineació horitzontal.
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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
Exemple 3:
Els exemples següents mostren la direcció flexible amb columna, alineació i contingut amb la posició inicial per defecte. La columna mostra etiquetes d'inici a final amb alineació vertical.
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 Sortida:
data hora mecanografiada
La sortida mostra el flexbox amb trucs CSS.
Exemple 4:
Els exemples següents mostren la direcció de flexió amb la columna inversa i l'alineació es mostra amb la posició inicial per defecte. El revers de la columna mostra l'etiqueta de final a principi amb alineació vertical.
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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
Trucs d'alineació flexible
El flex utilitza l'alineació i la posició del contingut amb trucs o propietats CSS.
Sintaxi:
La sintaxi següent utilitza els trucs CSS per a l'alineació de flexbox.
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;
Descripció:
- Podem utilitzar la pantalla amb flex per defecte per al contenidor o element.
- L'alineació de flexbox s'estableix amb valors d'inici, final, centre i altres trucs CSS.
- El contingut s'estableix a la caixa flexible amb la propietat 'justify-content'.
Exemples
Els exemples següents mostren el contingut i la posició de la caixa flexible amb diferents valors.
Exemple 1:
Els exemples següents mostren la direcció de flexió amb la fila, l'alineació amb el final i el contingut de justificació es mostra amb la posició final.
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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
encapsulació en java
Exemple 2:
El flexbox mostra el contenidor a la posició central amb la propietat 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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
Exemple 3:
El flexbox utilitza la propietat justify-content per mostrar el contenidor amb l'espai al voltant de l'etiqueta.
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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
Exemple 4:
El flexbox utilitza la propietat justify-content per mostrar el contenidor amb l'espai al voltant de l'etiqueta. Podem utilitzar la pantalla amb un valor de flexió en línia de la propietat.
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 Sortida:
La sortida mostra el flexbox amb trucs CSS.
Trucs CSS per al marge de Flexbox
Podem establir el marge i el farciment a Flexbox i el seu quadre fill mitjançant propietats CSS. Podem establir trucs bàsics de flexbox CSS i el seu valor per a la caixa de visualització. Després, afegiu la propietat CSS per establir el marge de l'element fill del flexbox.
powershell vs bash
Sintaxi
La sintaxi següent s'utilitza a l'element fill de la caixa flexible per establir el marge.
Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } Exemples
Els exemples següents estableixen el marge i el disseny mitjançant trucs CSS amb elements secundaris.
Exemple 1:
L'exemple següent estableix el marge i el farciment del primer element del contenidor flexbox. Podem establir el valor del marge, la mida de la lletra i el color de fons perquè coincideixi amb el valor requerit.
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 Sortida:
La sortida mostra el marge del primer element.
Exemple 2:
L'exemple següent estableix el marge i el farciment del tercer element del contenidor flexbox. Podem establir el valor del marge-auto amb els diferents colors de fons.
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 Sortida:
La sortida mostra el marge del primer element.
Exemple 3:
L'exemple següent estableix el marge i el farciment de l'últim element del contenidor flexbox.
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 Sortida:
La sortida mostra el marge del primer element.
Conclusió
Els trucs CSS utilitzen les propietats i el seu valor per configurar el disseny de la caixa flexible. Podem utilitzar diversos dissenys i trucs per obtenir el format necessari del flexbox CSS.