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