logo

TechCodeview

ЦСС трикови за Флекбок

ЦСС трикови за флекбок су неопходни за подешавање, дизајн и позиционирање контејнера помоћу флекбок-а и других ЦСС Флекбок својстава трикова. ЦСС трикови својства и вишеструке вредности својстава се користе за дизајн флекс кутије и њене податке. Можемо користити ЦСС трикове да поставимо поравнање, позицију, простор и друге дизајне за флекбок.

Следећи формат ЦСС трикова се користи за дизајн флексбокса.

  • ЦСС трикови за Флецбок смер
  • ЦСС трикови за Флекбок поравнање
  • ЦСС трикови за маргину Флекбок-а

Флек Дирецтион

Флек-дирецтион се користи за добијање смера контејнера унутар флекбок-а. Можемо поставити контејнере према захтевима.

Синтакса:

Следећа синтакса користи ЦСС трикове за флекбок. Можемо користити друга ЦСС својства за флек-дирецтион.

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

Опис:

  • Можемо да користимо екран са флексом подразумевано за контејнер или елемент.
  • Флек дирецтион користи ЦСС својство са вредностима реда, колоне и обрнуто.

Примери Флек-дирецтион

Следећи примери приказују флексбокс са приказом Флек својстава и вредности. Можемо да прилагодимо садржај, поравнање и упутства.

Пример 1:

Следећи примери показују смер савијања са редом, поравнањем и садржајем са подразумеваном почетном позицијом.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

Пример 2:

Следећи примери показују смер савијања са обрнутим редом, а садржај подразумевано приказује почетну позицију. Обрнути ред приказује ознаку од краја до почетка са хоризонталним поравнањем.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

Пример 3:

Следећи примери показују флек-дирецтион са колоном, поравнањем и садржајем са подразумеваном почетном позицијом. Колона приказује ознаке од почетка до краја са вертикалним поравнањем.

 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

Излаз:

кат тимпф тежина

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

Пример 4:

Следећи примери показују смер савијања са обрнутом колоном, а поравнање се подразумевано приказује са почетном позицијом. Реверс колоне приказује ознаку од краја до почетка са вертикалним поравнањем.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

Трикови за флексибилно поравнање

Флек користи поравнање и положај садржаја са ЦСС триковима или својствима.

Синтакса:

Следећа синтакса користи ЦСС трикове за флекбок поравнање.

 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;

Опис:

  • Можемо да користимо екран са флексом подразумевано за контејнер или елемент.
  • Флекбок поравнање је подешено са почетним, крајњим, средњим и другим вредностима ЦСС трикова.
  • Садржај се поставља у флекбок са својством 'јустифи-цонтент'.

Примери

Следећи примери показују садржај и позицију флексбокса са различитим вредностима.

Пример 1:

Следећи примери показују флек-дирецтион са редом, поравнање са крајем и јустифи-цонтент приказан са крајњом позицијом.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

функција стрелице куцаног писма
ЦСС трикови за Флекбок

Пример 2:

Флекбок приказује контејнер у средишњој позицији са својством јустифи-цонтент.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

Пример 3:

Флекбок користи својство јустифи-цонтент да прикаже контејнер са размаком око ознаке.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

Пример 4:

Флекбок користи својство јустифи-цонтент да прикаже контејнер са размаком око ознаке. Можемо да користимо екран са инлине флекс вредношћу својства.

 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

Излаз:

Излаз приказује флекбок са ЦСС триковима.

ЦСС трикови за Флекбок

ЦСС трикови за Флекбок маргину

Можемо поставити маргину и паддинг на Флекбок и његов подређени оквир користећи ЦСС својства. Можемо поставити основне флекбок ЦСС трикове и њихову вредност за оквир за приказ. Након тога додајте својство ЦСС да бисте поставили маргину подређеног елемента флекбок-а.

стринг у инт у Јави

Синтакса

Следећа синтакса се користи на подређеном елементу флекбок-а за постављање маргине.

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

Примери

Следећи примери постављају маргину и дизајн користећи ЦСС трикове са подређеним елементима.

Пример 1:

Следећи пример поставља маргину и допуну првог елемента флекбок контејнера. Можемо подесити вредност маргине, величину фонта и боју позадине тако да одговарају траженој вредности.

 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

Излаз:

Излаз приказује маргину првог елемента.

ЦСС трикови за Флекбок

Пример 2:

Следећи пример поставља маргину и допуну трећег елемента флекбок контејнера. Можемо подесити вредност маргин-ауто са различитим бојама позадине.

 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

Излаз:

Излаз приказује маргину првог елемента.

ЦСС трикови за Флекбок

Пример 3:

Следећи пример поставља маргину и паддинг последњег елемента флекбок контејнера.

 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

Излаз:

Излаз приказује маргину првог елемента.

ЦСС трикови за Флекбок

Закључак

ЦСС трикови користе својства и њихову вредност за постављање флекбок дизајна. Можемо користити више дизајна и трикова да добијемо потребан формат ЦСС флекбок-а.