dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Extinderea și micșorarea cu flex-1, flex-auto și shrink-0 în Tailwind CSS

Flexbox și CSS Grid Toate versiunile Tailwind Q&A / Distribuie cod

Controlează capacitatea unui element flexibil de a se extinde pentru a umple spațiul gol sau de a refuza comprimarea.

Sintaxă 
flex-1 | flex-auto | flex-none | shrink-0

Flex Grow și Flex Shrink în Tailwind CSS

Gestionarea dimensiunilor elastice în Flexbox se bazează pe câteva utilitare cheie:

  • flex-1: setează flex: 1 1 0%; elementul se extinde și ocupă tot spațiul liber rămas, ignorând lățimea sa inițială.
  • shrink-0: setează flex-shrink: 0; împiedică elementul să fie strivit sau micșorat când spațiul pe ecran este restrâns (esențial pentru pictograme și avatare într-un rând).
Exemplu Concret: Câmp de căutare expandabil cu pictogramă protejată
<div class="flex items-center gap-3 w-full">
  <svg class="w-6 h-6 shrink-0 text-gray-500">...</svg>
  <input class="flex-1 border p-2 rounded" placeholder="Caută..." />
  <button class="shrink-0 bg-blue-600 text-white px-4 py-2 rounded">Trimite</button>
</div>

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Extinderea și micșorarea cu flex-1, flex-auto și shrink-0

Ai o nelămurire despre utilizarea comenzii Extinderea și micșorarea cu flex-1, flex-auto și shrink-0 sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.