Qaabaynta dabacsan ee Flexbox

Casharkaan, waxaan baran doonaa Flexbox — qaab casri ah oo CSS ah oo loo isticmaalo qaabaynta walxaha si dabacsan.

1. Waa maxay Flexbox?

Flexbox (Flexible Box Layout) waa qaab CSS ah oo kuu ogolaanaya inaad si fudud u qaabayso walxaha — gaar ahaan markaad ka shaqaynayso hal xariiq (row) ama hal tiir (column).

2. Bilowga Flexbox

Si aad u bilowdo, ku dar display: flex waalidka:

.container {
    display: flex;
}

Tani waxay ka dhigaysaa carruurta (children) flex items oo isugu soo baxa xariiq (row).

3. Jiheynta Flexbox (Flex Direction)

flex-direction waxay qeexdaa jihada walxaha:

.container {
    flex-direction: row;            /* bidix ilaa midig (caadiga ah) */
    flex-direction: row-reverse;    /* midig ilaa bidix */
    flex-direction: column;         /* sare ilaa hoos */
    flex-direction: column-reverse; /* hoos ilaa sare */
}

4. Justify Content (Hagaajinta Xariijinta)

justify-content waxay hagaajisaa walxaha xariijinta (jihooyinka weyn):

.container {
    justify-content: flex-start;    /* bilowga (caadiga ah) */
    justify-content: flex-end;      /* dhammaadka */
    justify-content: center;        /* dhexda */
    justify-content: space-between; /* fogaansho u dhaxaysa */
    justify-content: space-around;  /* fogaansho hareeraha iyo dhexda */
    justify-content: space-evenly;  /* fogaansho siman */
}

5. Align Items (Hagaajinta Tiirka)

align-items waxay hagaajisaa walxaha tiirka (jihooyinka ka soo horjeeda):

.container {
    align-items: stretch;    /* dheeree (caadiga ah) */
    align-items: flex-start; /* bilowga */
    align-items: flex-end;   /* dhammaadka */
    align-items: center;     /* dhexda */
}

6. Flex Wrap

flex-wrap waxay go’aamisaa in walxuhu ku wareeraan xariiqda xigta marka ay ka bataan booska:

.container {
    flex-wrap: nowrap;      /* dhammaan hal xariiq (caadiga ah) */
    flex-wrap: wrap;        /* u wareeji xariiqda xigta */
    flex-wrap: wrap-reverse;/* u wareeji xariiqda sare */
}

7. Gap (Fogaanta)

gap waxay qeexdaa fogaanta u dhaxaysa walxaha:

.container {
    display: flex;
    gap: 16px;
}

8. Tusaale Dhamaystiran

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #0a0a0a;
}

.nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
}

Layli (Practice)

1. Abuur navbar flex ah oo leh logo bidix iyo xiriirro midig.
2. Abuur gallery oo ah saddex sawir oo isugu soo baxa xariiq, fogaansho 16px ah.
3. Isticmaal justify-content: center iyo align-items: center si aad shay ugu dhex-marniso sanduuq.
4. Tijaabi flex-direction: column marka aad xariijinayso alaabta kore/hoose.

Sii wadashada: Casharka xigta, waxaan baran doonaa CSS Grid — habka shabaqle!