تخطَّ إلى المحتوى الرئيسي
LibraTool logoLibraTool

مولد CSS Flexbox مجانًا

جرّب اتجاه 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>

🔒 كل شيء يعمل في متصفحك — لا يُرفع أي شيء.

كيف يعمل

ملعب flexbox تفاعلي: بدّل flex-direction وwrap وjustify-content وalign-items وشاهد ما يصل إلى 10 عناصر حية تُعاد ترتيبها فورًا. انقر على أي عنصر لإعطائه flex-grow: 1 وشاهد كيف يستحوذ على المساحة. يتحدّث CSS مباشرة، جاهزًا للنسخ إلى مشروعك.

  1. 1
    اضبط الحاوية
    الاتجاه، والالتفاف، وjustify-content، وalign-items، وgap.
  2. 2
    أضف عناصر
    من عنصر إلى عشرة عناصر flex مرقّمة.
  3. 3
    جرّب
    انقر على عنصر لتبديل flex-grow ورؤية التأثير.
  4. 4
    انسخ CSS
    قواعد الحاوية (والعنصر)، جاهزة للصق.

كل شيء يعمل في متصفحك — لا يُرفع أي شيء.

أدوات ذات صلة

🟦

مولد شبكة CSS

قم بتصميم شبكة CSS بصريًا — المسارات والوحدات والفجوات — ونسخ CSS و HTML التي تم إنشاؤها.

جربها
🌈

مولّد تدرجات CSS

قم بإنشاء تدرجات CSS خطية وشعاعية ومخروطية من خلال المعاينة المباشرة. انسخ CSS بنقرة واحدة.

جربها
🎨

CSS مولد ظل الصندوق

منشئ مرئي لـ box-shadow في CSS مع معاينة مباشرة، وتكديس متعدد الطبقات، ومنتقي ألوان، ومفتاح للظل الداخلي، ونسخ بنقرة واحدة. يتضمن إعدادات مسبقة لـ Material والنيومورفيزم والتوهج.

جربها

الأسئلة الشائعة