CSS Flexbox Ghid Rapid — Complete Guide

In this tutorial, you'll learn about CSS Flexbox Ghid Rapid. We cover key concepts, practical examples, and best practices.

Vei învăța cum să folosești Flexbox în CSS pentru a crea layout-uri unidimensionale flexibile și responsive, cu aliniere și distribuție automată a spațiului între elemente.

Problema

Layout-urile tradiționale cu float și inline-block sunt greu de controlat, mai ales când vine vorba de aliniere verticală, distribuție egală a spațiului sau reordonare pe diferite ecrane. Flexbox rezolvă aceste probleme printr-un sistem de layout unidimensional care distribuie spațiul și aliniază elementele automat.

Rezolvare rapidă

Pasul 1: Activează Flexbox pe container

/* Greșit — folosind float pentru layout */
.container {
    float: left;
    width: 100%;
}

/* Corect */
.container {
    display: flex;
    gap: 10px;
}

Rezultat: Elementele din .container se așază orizontal, una lângă alta.

Pasul 2: Aliniază pe axa principală cu justify-content

.container {
    display: flex;
    /* Greșit — fără aliniere explicită */
    /* Corect — distribuie spațiul egal între elemente */
    justify-content: space-between;
}

Rezultat: Primul element rămâne la stânga, ultimul la dreapta, iar restul se distribuie uniform.

Pasul 3: Aliniază pe axa secundară cu align-items

.container {
    display: flex;
    height: 200px;
    /* Greșit — elementele se întind implicit */
    /* Corect — centrează vertical */
    align-items: center;
}

Rezultat: Toate elementele sunt centrate vertical în container.

Pasul 4: Controlează dimensiunea elementelor cu flex

.item {
    /* Greșit — lățime fixă care nu se adaptează */
    width: 200px;
    /* Corect — crește sau scade proporțional */
    flex: 1;
}

.item.special {
    flex: 2; /* de două ori mai mare decât restul */
}

Rezultat: Elementele ocupă spațiul disponibil proporțional.

Prevenire

• Folosește display: flex pe container, nu pe elemente individuale
• Definește flex-direction explicit când ai nevoie de coloane
• Folosește gap în loc de margini pentru spațiere între elemente
• Verifică alinierea cu DevTools înainte să adaugi CSS suplimentar

Greșeli comune

1. Aplicarea display: flex pe elemente copil în loc de container — Flexbox funcționează doar pe container; copiii devin itemi flexibili automat.
2. Confundarea justify-content cu align-items — justify-content controlează axa principală (default orizontală), align-items controlează axa secundară.
3. Omisiunea lui flex-wrap când elementele nu încap — Fără flex-wrap: wrap, elementele se înghesuie și dau overflow.
4. Folosirea width în loc de flex-basis — flex-basis este mai predictibil în contexte Flexbox.
5. Setarea unei înălțimi fixe fără align-items: stretch — Dacă vrei ca toate elementele să aibă aceeași înălțime, stretch este comportamentul implicit.

Exercițiu

Creează o bara de navigare cu 4 link-uri distribuite uniform folosind justify-content: space-around. Adaugă un logo în stânga și un buton în dreapta, menținând alinierea verticală centrată.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.