Avec les modèles CSS de vent arrière, vous pouvez créer et positionner un élément.
TL; Dr
Le vent arrière n’est que CSS, mais Tailwind a ses propres modèles pour créer des éléments. Un élément n’est qu’un bloc de base avec des marges, un rembourrage et un alignement. Vous pouvez créer n’importe quel élément avec la grille, le flexion et le positionnement. Vous pouvez également modifier ces éléments en fonction de la taille de l’écran. Cela devrait vous montrer comment créer n’importe quel élément et le positionner correctement. Ce sont les mêmes modèles que vous voyez dans les applications de production.
Carte
Une carte est un élément de base avec une bordure et des bords arrondis. Vous pouvez créer des cartes personnalisées qui passent des titres, des en-têtes et des pieds de page et du contenu, mais les bases d’une carte sont un élément avec une bordure ou une ombre.
<div class="rounded-2xl shadow-lg p-6">Card 1</div>
Une ombre a une frontière elle-même, mais nous pourrions également utiliser une bordure régulière.
<div class="rounded-md border p-6">Card 2</div>
Remarquez que nous utilisons le rembourrage et les coins arrondis, mais il n’est pas nécessaire.
Modèle flexible et alignement
Une boîte flexible est probablement l’élément le plus utile et le plus commun à utiliser dans le vent arrière. Personnellement, je n’ai pas appris à l’utiliser correctement dans CSS jusqu’à ce que je voie les modèles de vent arrière que d’autres ont facilité.
Centrage, à gauche et à droite
Tout d’abord, assurez-vous que la largeur est pleine. w-full. Ensuite, utilisez la justification correcte.
<div class="flex w-full justify-center">
<p>Centered Item</p>
</div>
<div class="flex w-full justify-start">
<p>Left Item</p>
</div>
<div class="flex w-full justify-end">
<p>Right Item</p>
</div>
Maintenant, que se passe-t-il si nous avons affaire à des colonnes?
<div class="flex w-full flex-col items-center">
<p>Centered Item</p>
</div>
<div class="flex w-full flex-col items-start">
<p>Left Item</p>
</div>
<div class="flex w-full flex-col items-end">
<p>Right Item</p>
</div>
Nous obtenons exactement les mêmes résultats, mais nous utilisons items plutôt. Cela nous montre que notre contexte actuel peut changer la façon dont nous alignons les éléments.
Multiples
Si vous avez plusieurs éléments, vous voudrez peut-être un élément au début et un autre élément à la fin.
<div class="flex w-full justify-between">
<p>Item 1</p>
<p>Item 2</p>
</div>
Pour cela, nous utilisons justify-between.
Cependant, dans un flex-colnous n’avons pas de items- équivalent. Avec plusieurs lignes, nous aurions besoin de mettre toute la ligne dans un div avec un habitué flexou nous pourrions définir chaque ligne pour commencer et terminer avec self-start et self-end.
<div class="flex w-full flex-col">
<div class="flex justify-between">
<p>Item 1</p>
<p>Item 2</p>
</div>
</div>
<div class="flex w-full flex-col">
<p class="self-start">Item 1</p>
<p class="self-end">Item 2</p>
</div>
Ici, les éléments sont au début et à la fin, mais sur différentes lignes.
Modèle de grille et alignement
Si tu voulais suivre la même chose flex Modèle pour un élément, mais avec une grille, vous pourriez.
<div class="grid w-full justify-center">
<p>Centered</p>
</div>
<div class="grid w-full justify-start">
<p>Left</p>
</div>
<div class="grid w-full justify-end">
<p>Right</p>
</div>
Cependant, vous ne le feriez pas. Une boîte flexible est meilleure car les grilles sont les meilleures pour les éléments qui peuvent avoir des tailles dynamiques.
Multiples
Bien qu’il puisse y avoir un livre entier sur les grilles, je veux juste me concentrer sur l’alignement. Pour centrer les lignes, utilisez justify-center.
<div class="grid grid-rows-2 justify-center">
<p>Item 1</p>
<p>Item 2</p>
</div>
Cela a le même effet pour justify-end et justify-start Si nous voulons que les éléments s’alignent d’une certaine manière.
Mais, pour grid-colsnous avons un sélecteur différent: place-items- au lieu de items-.
<div class="grid grid-cols-2 place-items-center">
<p>Item 1</p>
<p>Item 2</p>
</div>
<div class="grid grid-cols-2 place-items-end">
<p>Item 1</p>
<p>Item 2</p>
</div>
<div class="grid grid-cols-2 place-items-start">
<p>Item 1</p>
<p>Item 2</p>
</div>
Remarquez les deux premiers éléments sont centrés dans cette colonne, la deuxième ligne a des éléments à la fin et la troisième rangée a des éléments au début.
Espacement
Disons que nous voulons espacer nos articles par 5 (1.25REM).
Les marges s’effondrent
Si nous utilisons des marges, ils ne prendront que le meilleur, pas les additionner.
<div>
<p class="border">Item 1</p>
<p class="border my-5">Item 2</p>
<p class="border my-5">Item 3</p>
</div>
Remarquez que nous n’avons pas de marge sur l’élément supérieur, et nous obtenons le même résultat.
Nouvel élément
Au lieu de se répéter, nous pourrions utiliser le space-y- sélecteur.
<div class="space-y-5">
<p class="border">Item 1</p>
<p class="border">Item 2</p>
<p class="border">Item 3</p>
</div>
Fléchir
Cependant, dans la plupart des cas, le meilleur élément à utiliser est probablement gap. Beaucoup de code passe-partout traite déjà flex et griddonc gap est le moyen naturel de créer un espacement.
<div class="flex flex-col gap-5">
<p class="border">Item 1</p>
<p class="border">Item 2</p>
<p class="border">Item 3</p>
</div>
Si vous avez affaire à des composants, vous n’avez parfois pas accès direct à l’élément central. Dans ce cas, il est facile d’ajouter un espace simple avec une fermeture automatique div.
<div class="my-5"></div>
Bars
Vous voulez donc une barre supérieure fixe? Utiliser fixed bien sûr.
<div
class="fixed flex h-16 w-full items-center justify-between"
>
Bar Content...
</div>
Haut
Alors que sticky peut être correct dans certaines circonstances, nous allons rester avec fixedcomme plus facile et plus courant. Vous pouvez ajouter top-0 réparé, mais ce n’est pas strictement nécessaire.
Note: Vous voudrez également vous assurer que le contenu a un rembourrage équivalent ou supérieur. Si votre bar est h-16vous voulez que le contenu ci-dessous ait pt-16 ou plus.
Bas
Pour en faire une barre inférieure, utilisez bottom-0. Assurez-vous que le contenu a correctement pb-16 ou équivalent.
Droite
Utiliser top-0 et right-0. Tu veux probablement flex-col pour votre bar. Assurez-vous d’avoir pr-16 ou largeur équivalente pour le contenu à gauche de la barre droite.
Gauche
Et enfin, utiliser top-0 et left-0 avec flex-col. Ajouter pl-16 ou largeur équivalente.
En utilisant ce type de blocs de vent arrière, vous voudrez peut-être changer où ils sont affichés en fonction de la taille de l’écran.
Standard
Pour la plus petite taille et plus grand, n’ajoutez rien.
Petit
Pour 640px et plus grand, utilisez sm:.
Moyen
Pour 768px et plus grand, utilisez md:.
Grand
Pour 1024px et plus grand, utilisez lg:.
Note: Le vent arrière a aussi xl: et 2xl Maintenant, mais pas aussi commun.
En utilisant
Alors, gardez vos principes fondamentaux pour toutes les tailles, puis construisez au-dessus de cela.
Requêtes de grille
L’une des meilleures façons de modifier les dispositions est d’utiliser des grilles.
<div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
<div class="rounded bg-blue-200 p-4">Column 1</div>
<div class="rounded bg-green-200 p-4">Column 2</div>
<div class="rounded bg-yellow-200 p-4">Column 3</div>
</div>
Cependant, que se passe-t-il si nous voulons modifier l’ordre des articles? Nous pouvons utiliser order-.
<div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
<div class="rounded bg-blue-200 p-4 lg:order-3">Column 1</div>
<div class="rounded bg-green-200 p-4">Column 2</div>
<div class="rounded bg-yellow-200 p-4 md:order-first">
Column 3
</div>
</div>
Nous pouvons avoir n’importe quel ordre que nous aimons, dans n’importe quelle taille de requête multimédia.
Maintenant, vous devriez être en mesure de conquérir tout positionnement d’élément de base!
Source link