مولّد Flexbox في CSS

أنشئ تخطيطات CSS بـ flexbox بصريًا. شاهد النتيجة في الوقت الفعلي وأنت تضبط الاتجاه والمحاذاة والالتفاف والتباعد.

flex-directionjustify-contentalign-itemsflex-wrap

gap: 8px

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

كيفية استخدام هذه الأداة

1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
3
Watch the live preview of four numbered boxes update instantly to reflect each change.
4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.

ما هو مولّد Flexbox في CSS؟

Flexbox هو الطريقة الحديثة لتوزيع العناصر في CSS، وهي أبسط بكثير من floats أو التموضع المطلق. الخصائص هي: flex-direction (صف أو عمود)، وjustify-content (المحاذاة على المحور الرئيسي)، وalign-items (المحور المتقاطع)، وflex-wrap، وgap. تعرض هذه الأداة كل هذه الخصائص مع معاينة في الوقت الفعلي.

حالات الاستخدام الشائعة

Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.

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

Flexbox أم Grid؟▼

استخدم flexbox للتخطيطات أحادية البُعد (صف من الأزرار، شريط تنقل). واستخدم CSS Grid للتخطيطات ثنائية البُعد (بطاقات في شبكة متجاوبة).

مولّد Flexbox في CSS

كيفية استخدام هذه الأداة

ما هو مولّد Flexbox في CSS؟

حالات الاستخدام الشائعة

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

أدوات ذات صلة

محوّل الألوان (HEX/RGB/HSL)

مولّد box-shadow في CSS

مولّد التدرّجات اللونية في CSS

مولّد منحنيات التسارع cubic-bezier

مولّد لوحات الألوان

مولّد border-radius في CSS