Toolipedia تضمين
AR
→ كل أدوات النصوص

مولد CSS flexbox

جرّب إعدادات flexbox على صناديق مباشرة وانسخ CSS.

  • مجاني
  • بلا تسجيل
  • يعمل على أي جهاز

حول مولد CSS flexbox

غيّر flex-direction وwrap وjustify-content وalign-items وgap على صناديق حية وشاهد كيف تتحرك العناصر، ثم انسخ CSS. يعمل justify-content على المحور الرئيسي وalign-items على المحور المتقاطع، ويتبادلان عند التحويل من صف إلى عمود، وهذا ما يربك كثيرًا من المبتدئين.

طريقة استخدام مولد CSS flexbox

  1. اختر الاتجاه والالتفاف وخيارات justify وalign.
  2. أضف صناديق أو أزلها وراقب إعادة ترتيبها مباشرة.
  3. انسخ CSS للحاوية والعناصر.

لماذا تستخدم هذه الأداة؟

تُعرف أيضًا باسم

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

كيف أوسّط div باستخدام flexbox؟

اضبط على العنصر الأب display: flex وjustify-content: center وalign-items: center. وأعطِ الأب ارتفاعًا ليكون للتوسيط الرأسي مساحة يعمل فيها.

ما الفرق بين justify-content وalign-items؟

يوزّع justify-content العناصر على المحور الرئيسي، بينما يضعها align-items على المحور المتقاطع. تغيير الاتجاه يبدّل أي محور هو أيٌّ.

لماذا لا تلتف عناصري على سطر جديد؟

تبقى عناصر flex على سطر واحد افتراضيًا. اضبط flex-wrap على wrap لتنتقل العناصر الزائدة إلى الصف التالي عند عدم وجود مساحة.

هل مولد CSS flexbox مجانية؟

نعم. استخدام مولد CSS flexbox على Toolipedia مجاني، بلا تسجيل وبلا علامة مائية.

هل استخدامها آمن؟

نعم. تتم كل العمليات الحسابية في متصفحك، ولا يُرسَل أي شيء تُدخله إلى خادمنا.

هل تعمل على هاتفي؟

نعم. تعمل في أي متصفح حديث على Android وiPhone، وكذلك على الأجهزة اللوحية والحواسيب. لا حاجة إلى تثبيت أي شيء.

هل أحتاج إلى حساب؟

لا. افتح الصفحة واستخدم الأداة فحسب. لا تسجيل ولا حاجة إلى بريد إلكتروني.

هل يمكنني وضع مولد CSS flexbox في موقعي؟

نعم. استخدم زر «ضمّن الأداة في موقعك» أسفل الأداة لنسخ مقطع قصير من الشيفرة ولصقه في صفحتك. الخدمة مجانية، ولا تحتاج إلى حساب، وتبقى الأداة تعمل داخل صفحتك.

أدوات ذات صلة