Flex, grille et positionnement en CSS : le guide CSS ultime de Tailwind

<div>



<p>Vous voulez plutôt ces éléments dans une colonne ?<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h3>
  
  
  Propriétés flexibles essentielles
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>justify-content</td>
<td>justify-center, justify-end</td>
<td>Aligns items along the main axis</td>
</tr>
<tr>
<td>align-items</td>
<td>items-center, items-end</td>
<td>Aligns items along the cross axis</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>flex-wrap, flex-nowrap</td>
<td>Wraps items to the next line when needed</td>
</tr>
<tr>
<td>flex-grow</td>
<td>flex-grow-0, flex-grow</td>
<td>Allows items to grow</td>
</tr>
<tr>
<td>flex-shrink</td>
<td>flex-shrink-0, flex-shrink</td>
<td>Allows items to shrink</td>
</tr>
<tr>
<td>flex-basis</td>
<td>basis-1/2, basis-full</td>
<td>Sets the initial size of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  Centrage avec Flexbox : la solution « Just Center It » de Tailwind ?‍♀️
</h3>

<p>Flexbox fait passer le centrage du casse-tête à seulement deux classes : justifier-centre et éléments-centre.<br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>2. Grille CSS : magie bidimensionnelle pour les mises en page</strong>Grid est le grand frère de Flexbox, parfait pour les mises en page 2D où vous souhaitez contrôler les lignes <em>et</em> colonnes. C'est votre choix lorsque vous avez besoin d'une galerie, de mises en page complexes ou de tout autre élément nécessitant une structure verticale et horizontale.</p>

<h3>
  
  
  Configuration d'une disposition en grille
</h3>

<p>Pour mettre en place une grille de base, commencez par définir vos colonnes avec les classes grid et grid-cols-*.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Cette configuration vous donne 3 colonnes égales avec une certaine marge de manœuvre entre elles, grâce à l'écart-4.</p>

<h3>
  
  
  Propriétés essentielles de la grille
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>grid-template-columns</td>
<td>grid-cols-3, grid-cols-6</td>
<td>Defines the number of columns</td>
</tr>
<tr>
<td>grid-template-rows</td>
<td>grid-rows-1, grid-rows-2</td>
<td>Defines the number of rows</td>
</tr>
<tr>
<td>gap</td>
<td>gap-4, gap-6</td>
<td>Adds space between grid items</td>
</tr>
<tr>
<td>grid-column</td>
<td>col-span-1, col-span-2</td>
<td>Sets the column span of an item</td>
</tr>
<tr>
<td>grid-row</td>
<td>row-span-1, row-span-2</td>
<td>Sets the row span of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  Centrage avec grille : Easy Peasy
</h3>

<p>Vous voulez que tout soit centré à l'intérieur de la grille ? Essayez ceci :<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p><em>Conseils pour faire face aux mauvais comportements réactifs</em><br>
L’un des problèmes les plus courants liés aux mises en page réactives consiste à tout adapter sur des écrans plus petits. Voici ce qu'il faut faire lorsque Grid et Flex commencent à réagir :</p>

<div>

<div>



absolu : éléments flottants nécessitant des ancresabsolute supprime un élément du flux, l'ancrant à l'ancêtre positionné le plus proche (un élément avec relatif ou similaire). Sans parent proche, il s'ancrera au corps.

<div>



corrigé : toujours là, même lorsque vous faites défiler les éléments fixes restent au même endroit même lorsque la page défile. C'est idéal pour les barres de navigation collantes, mais peut être ennuyeux sur mobile si cela chevauche un contenu important.

<div>



Utilisez sm:block caché pour vous cacher sur mobile :



<div>



sticky : restez jusqu'à ce que vous défiliez. Les éléments collants agissent comme des relatifs jusqu'à ce qu'ils atteignent un point de défilement, puis ils restent collés. Ils sont parfaits pour les en-têtes dont vous souhaitez suivre le défilement, mais seulement en cas de besoin.

Copier après la connexion

<div>






4. Transitions et transformations : mouvements fluides et changements visuels ?

Les transformations peuvent déplacer, faire pivoter, redimensionner et incliner les éléments, sans réellement déplacer leur place dans le flux de documents.

  
  
  Bases de la transformation Tailwind


Utilisez Translate-x-*, Translate-y-*, rotate-* et scale-* pour ajuster visuellement la position d'un élément.

<div>




  
  
  Transitions fluides pour les effets de survol


Pour créer des animations fluides, utilisez transition-* sur l'état de départ. Les utilitaires de transition-transformation, de transition-opacité et de transition-all de Tailwind facilitent la tâche.



<div>






5. Centrage du contenu : Flexbox, Grid et l'utilitaire tout-puissant « Place »

Centrer les choses peut être étonnamment difficile. Voici les meilleures astuces :

Copier après la connexion

<div>






6. Conseils de dépannage : lorsque Flex et Grid se comportent mal sur différents écrans