Хоризонтални простор је простор дуж к-осе између подређених елемената флек или грид контејнера када су поређани у низу. Вертикални простор је простор дуж и-осе између подређених елемената флек или грид контејнера када су распоређени у колону.
Овај чланак ће показати:
- Како додати хоризонтални простор између елемената у Таилвинд?
- Како додати вертикални размак између елемената у Таилвинд?
Како додати хоризонтални простор између елемената у Таилвинд?
Да бисте додали хоризонтални размак између елемената у Таилвинд-у, „ размак-к-<вредност> ” класа се користи са жељеним елементом у ХТМЛ програму. Ова класа додаје простор између елемената дуж к-осе.
Синтакса
<елемент класа = „размак-к-<вредност> ...'>... < / елемент>
Овде „к“ представља „к-осу“ или „хоризонтални простор“. Обавезно замените „<вредност>” било којом важећом вредношћу, као што је „4”, „10” итд.
Пример: Примена хоризонталног простора између елемената у Таилвинд
У овом примеру имамо флекс контејнер са неким подређеним елементима. Користићемо „ спаце-к-8 „корисна класа са „ <див> ” за додавање хоризонталног размака између његових подређених елемената:
< тело >
< див класа = 'флексибилни простор-к-8 м-10 х-20 в-мак' >
< див класа = 'бг-теал-500 в-20 п-5' > 1 < / див >
< див класа = 'бг-теал-500 в-20 п-5' > 2 < / див >
< див класа = 'бг-теал-500 в-20 п-5' > 3 < / див >
< див класа = 'бг-теал-500 в-20 п-5' > 4 < / див >
< див класа = 'бг-теал-500 в-20 п-5' > 5 < / див >
< див класа = 'бг-теал-500 в-20 п-5' > 6 < / див >
< / див >
< / тело >
Овде, у родитељском елементу <див>:
- “ флек ” класа креира флексибилан изглед.
- “ спаце-к-8 ” класа додаје 8 јединица хоризонталног размака између флек елемената унутар контејнера.
- “ м-10 ” класа додаје маргину од 10 јединица на све стране контејнера.
- “ х-20 ” класа поставља висину контејнера на 20 јединица.
- “ в-мак ” класа поставља ширину контејнера на максималну ширину садржаја.
У подређеним елементима <див>:
- “ бг-теал-500 ” класа поставља позадину флек елемената на теал.
- “ в-20 ” класа поставља ширину сваке флек ставке на 20 јединица.
- “ п-5 ” класа додаје 5 јединица допуна на све стране сваке флек ставке.
Излаз
Горњи излаз показује да је хоризонтални простор између флек елемента успешно примењен.
Како додати вертикални размак између елемената у Таилвинд?
Да бисте додали вертикални размак између елемената у Таилвинд-у, „ размак-и-<вредност> ” класа се користи са одређеним елементом у ХТМЛ програму. Ова класа додаје простор између елемената дуж и-осе.
Синтакса
<елемент класа = 'спаце-и-<валуе> ...' >...< / елемент>Овде „и“ представља „и-осу“ или „вертикални простор“. Обавезно замените „<вредност>” било којом стварном вредношћу, као што је „5”, „12” итд.
Пример: Примена вертикалног размака између елемената у задњем ветру
У овом примеру имамо флекс контејнер са неким подређеним елементима у колони. Користићемо „ простор-и-5 „корисна класа са „ <див> ” елемент за додавање вертикалног размака између његових подређених елемената:
< тело >< див класа = 'флек флек-цол спаце-и-5 м-10 тект-центер' >
< див класа = 'бг-теал-500 п-5' > 1 < / див >
< див класа = 'бг-теал-500 п-5' > 2 < / див >
< див класа = 'бг-теал-500 п-5' > 3 < / див >
< див класа = 'бг-теал-500 п-5' > 4 < / див >
< / див >
< / тело >
овде:
- “ флек ” класа креира флексибилан изглед.
- “ флек-цол ” класа поравнава флек ставке у вертикалном правцу (у колони).
- “ простор-и-5 ” класа додаје 5 јединица вертикалног размака између флек елемената унутар контејнера.
- “ м-10 ” класа додаје маргину од 10 јединица на све стране контејнера.
- “ текстуални центар ” класа поравна текст контејнера са средиштем.
Излаз
Вертикални простор између флекс елемената је ефикасно примењен.
Закључак
Да бисте додали хоризонтални и вертикални простор између елемената у Таилвинд-у, „ размак-к-<вредност> ' и ' размак-и-<вредност> ” услужне класе се користе са жељеним елементима у ХТМЛ програму. Ове класе се обично користе са флек и грид контејнерима за контролу простора између њихових подређених елемената. Овај чланак је илустровао метод примене хоризонталног и вертикалног простора између елемената у Таилвинд-у.