Tailwind CSS ofereix diversos ' alinear elements ” utilitats per controlar la posició dels elements flexibles i de quadrícula al llarg de l'eix transversal del contenidor. Aquestes classes d'utilitat inclouen 'items-start', 'items-center', 'items-end', 'items-baseline' i 'items-stretch'. A més, els usuaris també poden utilitzar els punts d'interrupció i les consultes multimèdia de la utilitat 'items-
Aquest article demostrarà el mètode d'aplicació de punts d'interrupció i consultes multimèdia a les utilitats 'alinear elements' a Tailwind.
Com aplicar punts d'interrupció i consultes multimèdia amb 'elements d'alineació' a Tailwind?
Per aplicar els punts d'interrupció i les consultes multimèdia desitjades a les utilitats de 'justificar el contingut' a Tailwind, creeu una estructura HTML. Després d'això, definiu el valor específic del ' elements-
Exemple
En aquest exemple, crearem un contenidor flexible amb la propietat 'items-start'. Farem servir el ' md 'punt de ruptura amb el' centre d'elements 'utilitat i ' lg 'punt de ruptura amb el' articles-final ' utilitat a la ' Sortida Per aplicar punts d'interrupció i consultes multimèdia amb les utilitats 'align-items' a Tailwind, definiu el valor desitjat al ' elements-
< cos >
< div classe = 'flex elements-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div classe = 'bg-pink-600 py-4 w-40' > 1 div >
< div classe = 'bg-pink-600 py-12 w-40' > 2 div >
< div classe = 'bg-pink-600 py-8 w-40' > 3 div >
div >
cos >
Aquí:
La sortida anterior mostra que l'alineació vertical dels elements flexibles està canviant a mesura que varia la mida de la pantalla. Això indica que els punts d'interrupció i les consultes de mitjans especificats s'han aplicat de manera efectiva amb la utilitat 'align-items'. Conclusió