مولد CSS Flexbox
أنشئ تخطيطات CSS Flexbox بصرياً مع معاينة مباشرة. اضبط الاتجاه، justify-content، align-items، wrap وgap. انسخ كود CSS. أداة أونلاين مجانية.
معاينة
مخرج CSS
مرجع
ما هو CSS Flexbox؟
CSS Flexible Box Layout (Flexbox) هو طريقة تخطيط أحادية البعد لترتيب العناصر في صفوف أو أعمدة. العناصر تتمدد (تتوسع) لملء المساحة الإضافية أو تنكمش لتناسب المساحات الأصغر. يسهّل تصميم هياكل تخطيط مرنة ومتجاوبة.
خصائص Flexbox الرئيسية
flex-direction يحدد اتجاه المحور الرئيسي. justify-content يحاذي العناصر على طول المحور الرئيسي. align-items يحاذي العناصر على طول المحور المتقاطع. flex-wrap يتحكم في التفاف العناصر إلى أسطر جديدة. gap يحدد المسافة بين العناصر.
الخصوصية
جميع عمليات توليد flexbox تتم بنسبة 100% في متصفحك. لا يتم إرسال أي بيانات إلى أي خادم.