Ako použiť body prerušenia a mediálne dopyty s „align-items“ v Tailwinde?

Tailwind CSS ponúka rôzne „ align-items ” nástroje na ovládanie polohy ohybných a mriežkových položiek pozdĺž priečnej osi kontajnera. Tieto pomocné triedy zahŕňajú „items-start“, „items-center“, „items-end“, „items-baseline“ a „items-stretch“. Používatelia môžu navyše využiť body prerušenia a mediálne dopyty v nástroji „items-“ na zmenu polohy položky ohybu alebo mriežky pozdĺž krížovej osi kontajnera na rôznych veľkostiach obrazovky.

Tento článok demonštruje metódu použitia bodov prerušenia a mediálnych dopytov v pomôckach „align-items“ v Tailwinde.

Ako použiť body prerušenia a mediálne dopyty s „align-items“ v Tailwinde?

Ak chcete použiť požadované body prerušenia a mediálne dopyty v pomôckach „justify-content“ v Tailwinde, vytvorte štruktúru HTML. Potom definujte konkrétnu hodnotu pre „ položky- ” pre rôzne veľkosti obrazovky pomocou “ md “ alebo „ lg “prerušovacie body. Nakoniec zmeňte veľkosť obrazovky webovej stránky na overenie.

Príklad

V tomto príklade vytvoríme flexibilný kontajner s vlastnosťou „items-start“. Použijeme „ md 'bod prerušenia s ' položky-centrum 'úžitok a' lg 'bod prerušenia s ' položky-koniec ” pomôcka v “