LibraTool logoLibraTool

Sameeyaha CSS Flexbox oo Bilaash ah

Isku day jihada flex, wrap-ka, justify iyo align on live items — kadibna koobi CSS-ka.

Wuu shaqeeyaa oflaayn marka la shubo
Hormar

Talo: riix walax preview-ga ku jira si aad u fur/xir flex-grow: 1 korkiisa.

Preview toos ah
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Wax walba waxay ku socdaan browser-kaaga — waxba lama soo shubo.

Sida Ay U Shaqeyso

Goob ciyaareed flexbox toos ah: u wareeg flex-direction, wrap, justify-content iyo align-items oo daawo ilaa 10 shay oo toos ah oo dib u habaysma isla markiiba. Guji shay kasta si aad ugu siiso flex-grow: 1 oo aragto sida uu boos u sheegto. CSS-ku wuu cusboonaysiin toos ah, diyaar u ah in la koobiyeeyo mashruucaaga.

  1. 1
    Deji sanduuqa
    Jihada, wrap, justify-content, align-items, gap.
  2. 2
    Ku dar shayaal
    Hal ilaa toban shay flex ah oo lambarrayn.
  3. 3
    Tijaabi
    Guji shay si aad u wareejiso flex-grow oo aragto saameynta.
  4. 4
    Koobi CSS-ka
    Xeerarka sanduuqa (iyo shayga), diyaar u ah in la dhajiyo.

Wax walba wuxuu ka shaqeeyaa biraawsarkaaga — waxba lama shubo.

Qalabka La Xiriira

🟦

Sameeyaha CSS Grid

Naqshadee grid CSS ah si muuqaal ah — tracks, halbeegyo iyo gaps — kadibna koobi CSS-ka iyo HTML-ka la abuuray.

Isku day
🎨

Soo Saaraha CSS Box Shadow

Qalab sawir ah oo loogu talagalay CSS box-shadow oo leh hordhac tooska ah, layers badan, midab-doorasho, beddelka inset, oo hal-riix nuqul. Waxaa ku jira presets Material, neumorphism, iyo dhalaal.

Isku day
◖

Soo Saaraha CSS Border Radius

Naqshadee geesaha wareegsan si tooska ah, iyadoo gees kasta si gaar ah loo xakameeyo. Waxay taageertaa syntax elliptical X/Y ah oo loogu talagalay qaabab organic ah.

Isku day

Su'aalaha Inta Badan La Iska Weydiiyo