Flexbox — Qaab-dhismeedka Hal-Jiho

Flexbox waa mid ka mid ah nidaamyada ugu fudud ee loo adeegsado qaabaynta (layout-ka) CSS. Wuxuu kuu sahlayaa inaad curiyayaasha ku habayso hal-jiho oo qura (toosan ama jiif) si aad u fudud oo awood badan [1].

Sida Loo Bilaabo Isticmaalka Flexbox

.weelka {
  display: flex;
}

Kaliya intaas ayaa ku filan — curiyayaasha carruurta ah ee ku dhex jira .weelka waxay isla markiiba u safan doonaan si jiif ah (horizontal).

Ereyada Aasaasiga

┌─────────────────────────────────┐
│ FLEX CONTAINER (display: flex)  │
│                                 │
│  ┌──────┐  ┌──────┐  ┌──────┐  │ ← Main Axis (Mehfarka Jiifka ah)
│  │ Item │  │ Item │  │ Item │  │
│  └──────┘  └──────┘  └──────┘  │
│                                 │ ↕ Cross Axis (Mehfarka Toosan)
└─────────────────────────────────┘

• Flex Container (Weelka): Curiyaha sare ee leh sifada display: flex.
• Flex Items (Curiyayaasha Hoose): Curiyayaasha carruurta ah ee si toos ah ugu dhex jira weelka.
• Main Axis (Mehfarka Guud): Jihaad-socodka ugu weyn ee Flexbox (caadiyan waa jiif).
• Cross Axis (Mehfarka Is-gala): Jihaad-socodka ku-tallan ee weelka (caadiyan waa toosan).

Sifooyinka Flex Container (Weelka)

flex-direction — Jihaad-socodka Mehfarka

.weelka { flex-direction: row; }            /* Jiif ka bidix ilaa midig → (caadiga ah) */
.weelka { flex-direction: row-reverse; }    /* Jiif ka midig ilaa bidix ← */
.weelka { flex-direction: column; }         /* Toosan ka sare ilaa hoose ↓ */
.weelka { flex-direction: column-reverse; } /* Toosan ka hoose ilaa sare ↑ */

justify-content — Horeynta Mehfarka Guud (Main Axis)

.weelka { justify-content: flex-start;    } /* Ka bilaabashada bidix (caadiga ah) */
.weelka { justify-content: flex-end;      } /* Ka bilaabashada midig */
.weelka { justify-content: center;        } /* Dhexda */
.weelka { justify-content: space-between; } /* Kala-fogaansho siman — iyadoon geesaha bannaan laga tegin */
.weelka { justify-content: space-around;  } /* Kala-fogaansho siman oo geesaha u dhowranayaan kala-bar bannaan */
.weelka { justify-content: space-evenly;  } /* Kala-fogaansho siman oo dhan kasta ah */

align-items — Horeynta Mehfarka Is-gala (Cross Axis)

.weelka { align-items: stretch;     } /* Inay wada fidaan oo siman yihiin (caadiga ah) */
.weelka { align-items: flex-start;  } /* Dusha sare */
.weelka { align-items: flex-end;    } /* Qeybta hoose */
.weelka { align-items: center;      } /* Dhexda */
.weelka { align-items: baseline;    } /* Isu-hagaajinta xariiqda hoose ee qoraalka (Baseline) */

flex-wrap — Laabashada Curiyayaasha

.weelka { flex-wrap: nowrap;       } /* Ha laabmin (caadiga ah) */
.weelka { flex-wrap: wrap;         } /* Laab haddii boosku ku yaraado */
.weelka { flex-wrap: wrap-reverse; } /* Laab laakiin u rogo si rogan */

gap — Masaafada u dhaxaysa Curiyayaasha

.weelka { gap: 20px;       } /* Masaafada labada jiho oo isku mid ah */
.weelka { gap: 16px 24px;  } /* row-gap  column-gap */
.weelka { row-gap: 16px;   } /* Masaafada u dhaxaysa safafka */
.weelka { column-gap: 24px; } /* Masaafada u dhaxaysa tiirarka */

align-content — Horeynta Safafka Is-dul-saaran

Waxay shaqaysaa oo kaliya marka uu jiro flex-wrap: wrap iyo markay curiyayaashu ku filan yihiin inay safaf badan noqdaan:

.weelka {
  flex-wrap: wrap;
  align-content: flex-start;    /* In safafku kor isugu tagaan */
  align-content: center;        /* In safafku dhexda isugu yimaadaan */
  align-content: space-between; /* In safafku kala fogaadaan iyagoo is-simaya */
}

Sifooyinka Flex Items (Curiyayaasha Hoose)

flex-grow — Koboca Curiyaha

Sifadan waxay go’aamisaa inta qaybood ee booska bannaan uu qaadanayo curiyaha hoose:

.item-a { flex-grow: 1; } /* 1 qayb oo booska ka mid ah */
.item-b { flex-grow: 2; } /* 2 qaybood oo booska ka mid ah */
.item-c { flex-grow: 1; } /* 1 qayb oo booska ka mid ah */
/* Wadarta: 4 qaybood oo bannaan — A wuxuu helayaa 25%, B wuxuu helayaa 50%, halka C uu helayo 25% */

flex-shrink — Sifada Isku-fududeynta/Yareynta

.item { flex-shrink: 1; }  /* Wuu isku yaraynayaa haddii loo baahdo (caadiga ah) */
.item { flex-shrink: 0; }  /* Marna ha yarayn — cabbirkiisa asalka ah ha ku ekaado */

flex-basis — Cabbirka Bilowga ee Curiyaha

.item { flex-basis: 200px; }  /* Cabbir go'an oo bilow ah */
.item { flex-basis: 33%;   }  /* Boqolkiiba ahaan */
.item { flex-basis: auto;  }  /* Wuxuu raacayaa cabbirka nuxurka ku dhex jira (caadiga ah) */

flex — Habka Gaaban ee isku-darka (Shorthand)

/* flex: grow  shrink  basis */
.item { flex: 1;        }  /* = flex: 1 1 0% */
.item { flex: 1 1 auto; }
.item { flex: 0 0 200px; } /* Cabbir go'an — ma kobcayo, mana yaranyayo */
.item { flex: 2;        }  /* Wuxuu noqonayaa laba jeer ka weyn curiyayaasha kale ee leh flex: 1 */

align-self — Meelaynta hal Curiye oo gaar ah

.items   { align-items: center; }     /* Dhammaan curiyayaasha dhexda ha tagaan */
.mid-sare { align-self: flex-start; } /* Kan oo kaliya dusha sare ha aado */
.mid-hoose { align-self: flex-end;  } /* Kan oo kaliya hoos ha aado */
.mid-fidi  { align-self: stretch;   } /* Kan oo kaliya ha fidiyo */

order — Habaynta Taxanaha

.item-b { order: 1; } /* Wuxuu muuqanayaa koowaad */
.item-a { order: 2; } /* Wuxuu muuqanayaa labaad */
.item-c { order: 3; } /* Wuxuu muuqanayaa saddexaad */
/* Qiimaha caadiga ah ee curiye kasta waa: 0 */

Dhexdhexaadinta — Mid ka mid ah Xeerarka Ugu Muhiimsan

/* Dhexdhexaadinta labada jiho ee weelka: */
.weelka {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Dhexdhexaadinta curiye ku dhex jira bogga oo dhan: */
.bogga {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Tusaalooyin Waaryci ah oo ku saabsan Isticmaalka

Baar-shaqo (Nav-bar)

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background: #0a0a0a;
}

Symmetry-ga iyo Isku-dheelitirka Kaadhadhka

.kaadhada {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.kaadhka {
  flex: 1 1 280px;  /* Kobco, yaraada, dhis aasaas 280px */
  /* Wuxuu noqonayaa: 3 tiir desktop-ka, 2 tiir tablet-ka, iyo 1 tiir mobile-ka */
}

Naqshadaynta Baarka Dhinaca (Sidebar Layout)

.qaabyada {
  display: flex;
  gap: 24px;
}

.sidebar { flex: 0 0 260px; }  /* Cabbir go'an — ma kobcayo */
.nuxurka { flex: 1;         }  /* Wuxuu qaadanayaa booska bannaan oo dhan */

Qeybta Hoose ee Mareegta (Footer Links)

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-links a {
  white-space: nowrap;
}

Tusaale Mashruuc Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; background: #f9f7f4; }

    /* Baarka Shaqada (Nav) */
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      height: 64px;
      background: #0a0a0a;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .logo { color: #00d97e; font-weight: 700; font-size: 1.1rem; }
    .nav-links { display: flex; gap: 4px; }
    .nav-links a { color: #888; text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 0.875rem; }
    .nav-links a:hover { color: white; background: rgba(255,255,255,0.08); }
    .nav-cta {
      background: #00d97e; color: #0a0a0a;
      padding: 8px 18px; border-radius: 99px;
      font-size: 0.85rem; font-weight: 700;
      text-decoration: none;
    }

    /* Qaybta Muhiimka ah (Hero section) — oo dhexda ah */
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 60vh;
      padding: 40px 20px;
      background: linear-gradient(135deg, #0a0a0a 0%, #1a2a1a 100%);
    }
    .hero h1 { color: white; font-size: clamp(2rem,5vw,3rem); margin-bottom: 12px; }
    .hero p  { color: rgba(255,255,255,0.6); font-size: 1rem; max-width: 480px; margin-bottom: 28px; }
    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
    .btn-primary   { background: #00d97e; color: #0a0a0a; padding: 12px 24px; border-radius: 99px; font-weight: 700; text-decoration: none; }
    .btn-secondary { border: 1.5px solid rgba(255,255,255,0.2); color: white; padding: 12px 24px; border-radius: 99px; font-weight: 600; text-decoration: none; }

    /* Qaybta Sifooyinka (Features Section) */
    .features {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 60px 32px;
      max-width: 960px;
      margin: 0 auto;
    }
    .feature {
      flex: 1 1 260px;
      background: white;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .feature-icon { font-size: 1.75rem; }
    .feature h3   { font-size: 0.95rem; color: #0a0a0a; }
    .feature p    { font-size: 0.85rem; color: #777; line-height: 1.6; flex: 1; }
    .feature a    { color: #00a860; font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-top: auto; }

    /* Naqshadaynta Baarka Dhinaca (Sidebar Layout) */
    .qaabyada {
      display: flex;
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 32px 60px;
    }
    .sidebar { flex: 0 0 220px; }
    .sidebar-nuxur { background: white; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); padding: 18px; }
    .sidebar-nuxur p  { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #bbb; margin-bottom: 10px; }
    .sidebar-nuxur a  { display: block; font-size: 0.875rem; color: #555; text-decoration: none; padding: 7px 0; border-bottom: 1px solid #f0f0f0; }
    .sidebar-nuxur a:hover { color: #00a860; }
    .nuxurka-weyn { flex: 1; background: white; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); padding: 28px; }
    .nuxurka-weyn h2 { font-size: 1.4rem; margin-bottom: 12px; }
    .nuxurka-weyn p  { color: #555; line-height: 1.8; }
  </style>
</head>
<body>

  <nav>
    <span class="logo">Ereyle</span>
    <div class="nav-links">
      <a href="#">Hoyga</a>
      <a href="#">Koorsooyinka</a>
      <a href="#">Blog</a>
    </div>
    <a href="#" class="nav-cta">Bilaaw</a>
  </nav>

  <div class="hero">
    <h1>Baro Flexbox Maanta</h1>
    <p>Flexbox wuxuu kuu ogolaanayaa inaad walxaha meeleyso si fudud oo xoog leh.</p>
    <div class="hero-btns">
      <a href="#" class="btn-primary">Ku Bilaab Bilaash</a>
      <a href="#" class="btn-secondary">Eeg Casharada</a>
    </div>
  </div>

  <div class="features">
    <div class="feature">
      <div class="feature-icon">⚡</div>
      <h3>Degdeg</h3>
      <p>Casharro gaagaaban oo buuxa, wakhti yar, wax banyakna aad ku baranayso.</p>
      <a href="#">Bilaaw →</a>
    </div>
    <div class="feature">
      <div class="feature-icon">📖</div>
      <h3>Qoraal</h3>
      <p>Ma jiraan muuqaallo — waa qoraal kaliya si aad si dhakhso ugu barato.</p>
      <a href="#">Akhri →</a>
    </div>
    <div class="feature">
      <div class="feature-icon">✦</div>
      <h3>Bilaash</h3>
      <p>Dhammaan casharradu waa bilaash — weligeed.</p>
      <a href="#">Geli →</a>
    </div>
  </div>

  <div class="qaabyada">
    <div class="sidebar">
      <div class="sidebar-nuxur">
        <p>Nuxurka</p>
        <a href="#">Waa maxay Flexbox?</a>
        <a href="#">Sifooyinka Weelka (Container)</a>
        <a href="#">Sifooyinka Curiyaha Hoose (Item)</a>
        <a href="#">Tusaalooyin</a>
      </div>
    </div>
    <div class="nuxurka-weyn">
      <h2>Falanqaynta Flexbox</h2>
      <p>Flexbox (Flexible Box Layout) waa nidaamka CSS ee loo adeegsado meelaynta walxaha hal-jiho. Wuxuu fududeeyaa dhismaha baararka-shaqo, kaadhadhka, iyo qaab-dhismeedka aasaasiga ah ee mashaariicda bogagga internetka.</p>
    </div>
  </div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Sida loo qaabeeyo laba-jiho (CSS Grid) ee CSS.