CSS триковете за flexbox са от съществено значение за коригиране, проектиране и позициониране на контейнера с помощта на flexbox и други свойства на CSS Flexbox трикове. Свойството на CSS трикове и множество стойности на свойствата се използват за дизайна на flex box и неговите данни. Можем да използваме CSS трикове, за да зададем подравняване, позиция, пространство и други дизайни за flexbox.
Следният формат на CSS трикове се използва за проектиране на flexbox.
- CSS трикове за Flecbox посока
- CSS трикове за подравняване на Flexbox
- CSS трикове за поле на Flexbox
Flex Direction
Flex-direction се използва за получаване на посоката на контейнера вътре в flexbox. Можем да настроим контейнерите според изискванията.
Синтаксис:
Следният синтаксис използва CSS триковете за flexbox. Можем да използваме други CSS свойства за flex-direction.
display: flex; flex-direction: row | row-reverse | column | column-reverse;
описание:
- Можем да използваме дисплея с flex по подразбиране за контейнера или елемента.
- Flex direction използва свойството CSS с ред, колона и обратни стойности.
Примери за Flex-direction
Следващите примери показват flexbox с показвани Flex свойства и стойности. Можем да коригираме съдържанието, подравняването и посоките.
Пример 1:
Следните примери показват flex-direction с ред, подравняване и съдържание с начална позиция по подразбиране.
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 Изход:
Резултатът показва flexbox с CSS трикове.
Пример 2:
Следващите примери показват посоката на огъване с обръщане на реда, а съдържанието показва началната позиция по подразбиране. Редът на обратната страна показва етикета от край до начало с хоризонтално подравняване.
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 Изход:
Резултатът показва flexbox с CSS трикове.
Пример 3:
Следните примери показват flex-direction с колона, подравняване и съдържание с начална позиция по подразбиране. Колоната показва етикети от начало до край с вертикално подравняване.
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 Изход:
машинопис тип дата
Резултатът показва flexbox с CSS трикове.
Пример 4:
Следващите примери показват посоката на огъване с обръщане на колоната, а подравняването се показва с началната позиция по подразбиране. Обратната страна на колоната показва етикета от край до начало с вертикално подравняване.
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 Изход:
Резултатът показва flexbox с CSS трикове.
Трикове за гъвкаво подравняване
Flex използва подравняване и позиция на съдържанието с CSS трикове или свойства.
Синтаксис:
Следният синтаксис използва CSS трикове за подравняване на 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;
описание:
- Можем да използваме дисплея с flex по подразбиране за контейнера или елемента.
- Подравняването на flexbox се задава с начални, крайни, централни и други стойности на CSS трикове.
- Съдържанието се задава във flexbox със свойството 'justify-content'.
Примери
Следващите примери показват съдържанието и позицията на flexbox с различни стойности.
Пример 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 > 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 Изход:
Резултатът показва flexbox с CSS трикове.
Пример 2:
Flexbox показва контейнера в централна позиция със свойството 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 Изход:
Резултатът показва flexbox с CSS трикове.
низ.подниз java
Пример 3:
Flexbox използва свойството justify-content, за да покаже контейнера с пространството около етикета.
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 Изход:
Резултатът показва flexbox с CSS трикове.
Пример 4:
Flexbox използва свойството justify-content, за да покаже контейнера с пространството около етикета. Можем да използваме дисплея с вградена гъвкава стойност на свойството.
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 Изход:
Резултатът показва flexbox с CSS трикове.
CSS трикове за марж на Flexbox
Можем да зададем полето и подложката на Flexbox и неговото дъщерно поле с помощта на CSS свойства. Можем да зададем основни CSS трикове на flexbox и тяхната стойност за полето за показване. След това добавете свойството CSS, за да зададете границата на дъщерния елемент на flexbox.
excel премахнете първия знак
Синтаксис
Следният синтаксис се използва за дъщерния елемент на flexbox за задаване на марж.
Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } Примери
Следващите примери задават полето и дизайна с помощта на CSS трикове с дъщерни елементи.
Пример 1:
Следващият пример задава марж и подложка на първия елемент на контейнера flexbox. Можем да зададем стойността на полето, размера на шрифта и цвета на фона, така че да отговарят на необходимата стойност.
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 Изход:
Резултатът показва границата на първия елемент.
Пример 2:
Следващият пример задава марж и подложка на третия елемент на контейнера flexbox. Можем да зададем стойността на margin-auto с различните цветове на фона.
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 Изход:
Резултатът показва границата на първия елемент.
Пример 3:
Следващият пример задава марж и подложка на последния елемент на контейнера 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 Изход:
Резултатът показва границата на първия елемент.
Заключение
CSS триковете използват свойствата и тяхната стойност, за да зададат дизайна на flexbox. Можем да използваме множество дизайни и трикове, за да получим необходимия формат на CSS flexbox.