Flexbox Generator

Visually build CSS Flexbox layouts.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

عدد العناصر: 5

معاينة مباشرة

CSS المُولَّد

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

حول هذه الأداة

يتيح لك مولّد CSS Flexbox تكوين حاوية flex بصرياً عن طريق ضبط جميع خصائص flexbox الرئيسية — flex-direction وflex-wrap وjustify-content وalign-items وalign-content.

Flexbox هو وحدة تخطيط CSS مصممة للتخطيطات أحادية الأبعاد (صفوف أو أعمدة). فهم تفاعل كل خاصية أمر بالغ الأهمية لبناء واجهات مستجيبة.

كيفية الاستخدام

اضبط flex-direction للتحكم في المحور الرئيسي (صف أو عمود).
اضبط flex-wrap للتحكم فيما إذا كانت العناصر تلتف إلى السطر التالي.
استخدم justify-content لتوزيع العناصر على طول المحور الرئيسي.
استخدم align-items لمحاذاة العناصر على طول المحور العرضي.
غيّر عدد عناصر المعاينة باستخدام شريط التمرير.
انقر نسخ لنسخ CSS المُولَّد.

حالات الاستخدام

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

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

ما الفرق بين align-items وalign-content؟ — align-items يحاذي العناصر داخل سطر واحد؛ align-content ينطبق فقط عند وجود أسطر متعددة.
هل يعمل flexbox للتخطيطات ثنائية الأبعاد؟ — Flexbox أحادي البُعد. للتخطيطات الشبكية المعقدة، استخدم CSS Grid.
هل يدعم flexbox جميع المتصفحات؟ — نعم. يتمتع flexbox بدعم كامل في جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge.