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