Trucurile CSS pentru flexbox sunt esențiale pentru ajustarea, proiectarea și poziționarea containerului folosind flexbox și alte proprietăți CSS Flexbox. Proprietatea trucurilor CSS și valorile proprietăților multiple sunt utilizate pentru proiectarea casetei flexibile și datele sale. Putem folosi trucuri CSS pentru a seta alinierea, poziția, spațiul și alte modele pentru flexbox.
Următorul format CSS trucuri este folosit pentru a proiecta flexbox.
- Trucuri CSS pentru direcția Flecbox
- Trucuri CSS pentru alinierea Flexbox
- Trucuri CSS pentru marginea Flexbox
Direcție Flex
Direcția flexibilă este utilizată pentru a obține direcția containerului în interiorul cutiei flexibile. Putem seta containerele conform cerințelor.
Sintaxă:
Următoarea sintaxă folosește trucurile CSS pentru flexbox. Putem folosi alte proprietăți CSS pentru direcția flex.
display: flex; flex-direction: row | row-reverse | column | column-reverse;
Descriere:
- Putem folosi afișajul cu flex în mod implicit pentru container sau element.
- Direcția Flex utilizează proprietatea CSS cu valorile rând, coloană și inversă.
Exemple de direcție Flex
Următoarele exemple arată flexbox-ul cu afișare proprietăți și valori Flex. Putem ajusta conținutul, alinierea și direcțiile.
Exemplul 1:
Următoarele exemple arată direcția flexibilă cu rând, aliniere și conținut cu poziția de pornire în mod implicit.
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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Exemplul 2:
Următoarele exemple arată direcția flexibilă cu rândul invers, iar conținutul arată poziția de pornire în mod implicit. Rândul invers arată eticheta de la capăt la început cu aliniere orizontală.
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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Exemplul 3:
Următoarele exemple arată direcția flexibilă cu coloană, aliniere și conținut cu poziția de pornire în mod implicit. Coloana arată etichete de la început la sfârșit cu aliniere 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 Ieșire:
cheie unică mysql
Ieșirea arată flexbox-ul cu trucuri CSS.
Exemplul 4:
Următoarele exemple arată direcția flexibilă cu coloana inversă, iar alinierea arată implicit cu poziția de pornire. Reversul coloanei arată eticheta de la capăt la început cu aliniere 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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Trucuri de aliniere flexibilă
Flexul folosește alinierea și poziția conținutului cu trucuri sau proprietăți CSS.
Sintaxă:
Următoarea sintaxă folosește trucurile CSS pentru alinierea 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;
Descriere:
- Putem folosi afișajul cu flex în mod implicit pentru container sau element.
- Alinierea flexbox este setată cu start, end, center și alte valori de truc CSS.
- Conținutul este setat în flexbox cu proprietatea „justify-content”.
Exemple
Următoarele exemple arată conținutul și poziția flexbox cu valori diferite.
Exemplul 1:
Următoarele exemple arată direcția flexibilă cu rândul, alinierea cu capătul și conținutul justificat afișat cu poziția 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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Exemplul 2:
Cutia flexibilă arată containerul în poziția centrală cu proprietatea justify-content.
Seria Fibonacci în c
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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Exemplul 3:
Flexbox-ul folosește proprietatea justify-content pentru a afișa containerul cu spațiul din jurul etichetei.
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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Exemplul 4:
Flexbox-ul folosește proprietatea justify-content pentru a afișa containerul cu spațiul din jurul etichetei. Putem folosi afișajul cu o valoare flex inline a proprietății.
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 Ieșire:
Ieșirea arată flexbox-ul cu trucuri CSS.
Trucuri CSS pentru Marja Flexbox
Putem seta marginea și umplutura la Flexbox și caseta sa copil folosind proprietățile CSS. Putem seta trucuri de bază pentru flexbox CSS și valoarea lor pentru caseta de afișare. După aceea, adăugați proprietatea CSS pentru a seta marja elementului copil al casetei flexibile.
excel elimina primul caracter
Sintaxă
Următoarea sintaxă este utilizată pe elementul copil al casetei flexibile pentru a seta marja.
Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } Exemple
Următoarele exemple stabilesc marginea și designul folosind trucuri CSS cu elemente copil.
Exemplul 1:
Următorul exemplu stabilește marginea și umplutura primului element al containerului flexbox. Putem seta valoarea marginii, dimensiunea fontului și culoarea de fundal pentru a se potrivi cu valoarea necesară.
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 Ieșire:
Ieșirea arată marja primului element.
Exemplul 2:
Următorul exemplu stabilește marginea și umplutura celui de-al treilea element al containerului flexbox. Putem seta valoarea margin-auto cu diferite culori de fundal.
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 Ieșire:
Ieșirea arată marja primului element.
Exemplul 3:
Următorul exemplu stabilește marginea și umplutura ultimului element al containerului 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 Ieșire:
Ieșirea arată marja primului element.
Concluzie
Trucurile CSS folosesc proprietățile și valoarea lor pentru a seta designul flexbox. Putem folosi mai multe modele și trucuri pentru a obține formatul necesar al casetei flexibile CSS.