LibraTool logoLibraTool

دروستکەری Flexbox CSSی بەخۆڕایی

ئاراستە، سڕینەوە، ڕێکخستنی flex، بەرەوپێش و ڕێکخستنی تاک لەسەر بابەتی زیندوو تاقی بکەرەوە — و CSS کۆپی بکە.

بەبێ ئینتەرنێت کاردەکات دوای بارکردن
پێشدانراوەکان

ئامۆژگاری: کلیک لەسەر بابەتێک بکە لە پێشبینیندا بۆ گۆڕینی flex-grow: 1 بۆ ئەو بابەتە.

پێشبینینی زیندوو
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>

🔒 هەموو شتێک لە وێبگەڕەکەت جێبەجێ دەبێت — هیچ شتێک ناناردرێت.

چۆن کار دەکات

یاریگای فلێکسبۆکسی کارلێکی: flex-direction، wrap، justify-content و align-items بگۆڕە و ببینە تا 10 بابەتی زیندوو دەستبەجێ دووبارە ڕێک دەخرێنەوە. کرتە لەسەر هەر بابەتێک بکە بۆ دانی flex-grow: 1 و بینینی چۆن شوێن داوا دەکات. CSSـەکە زیندوو نوێدەبێتەوە، ئامادە بۆ کۆپیکردن بۆ ناو پرۆژەکەت.

  1. 1
    کۆنتەینەرەکە دابنێ
    ئاراستە، wrap، justify-content، align-items، بۆشایی.
  2. 2
    بابەت زیاد بکە
    یەک تا دە بابەتی فلێکسی ژمارەکراو.
  3. 3
    تاقی بکەرەوە
    کرتە لەسەر بابەتێک بکە بۆ گۆڕینی flex-grow و بینینی کاریگەرییەکە.
  4. 4
    CSSـەکە کۆپی بکە
    یاسای کۆنتەینەر (و بابەت)، ئامادە بۆ لکاندن.

هەموو شتێک لە وێبگەڕەکەتدا ڕادەبات — هیچ شتێک بار ناکرێت.

ئامرازە پەیوەندیدارەکان

🟦

دروستکەری تۆڕی CSS

تۆڕی CSS بە شێوەی بینراو داڕێژە — تراک، یەکە و کاژاوەکان — و CSS و HTML‌ی دروستکراو کۆپی بکە.

تاقی بکەرەوە
🎨

دروستکەری سێبەری سندوقی CSS

دروستکەری بینراوی box-shadowی CSS لەگەڵ پێشبینینی زیندوو، چینکردنی فرەچینە، دیاریکەری ڕەنگ، بژاردەی inset، و کۆپیکردنی یەک کلیکی. پێشوەختی Material، نیومۆرفیزم، و درەوشانەوە لەخۆدەگرێت.

تاقی بکەرەوە
◖

دروستکەری خڵی گۆشەی CSS

گۆشەی خڵکراو بە بینراوی دیزاین بکە لەگەڵ کۆنترۆڵی سەربەخۆی هەر گۆشەیەک. سینتاکسی X/Yی بێزەیی پشتگیری دەکات بۆ شێوەی بلۆبی سروشتی.

تاقی بکەرەوە

پرسیارە باوەکان