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