مولّد CSS Flexbox

اضبط اتجاه Flexbox والالتفاف ومحاذاة المحتوى والفجوات وخصائص كل عنصر بصرياً، مع عناصر حية ومعاينة فورية وكود CSS جاهز للنسخ.

الحاوية

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

لا يؤثر align-content إلا عندما تلتف العناصر على عدة أسطر.

عدد العناصر

العنصر 1

اختر عنصرًا من هنا أو انقر عليه في المعاينة.

flex-grow

flex-shrink

order

flex-basis

align-self

معاينة

اسحب الزاوية السفلية للمعاينة لتغيير حجم الحاوية.

كود CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

أدوات ذات صلة

عرض الكل

مولّد ظل الصندوق CSS مولّد تدرج CSS مولّد Grid CSS مولّد نصف قطر الحدود مولّد Glassmorphism مولّد Neumorphism مولّد ظل النص CSS مولّد حركات CSS

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

ملعب تفاعلي لـ flexbox: اضبط خصائص الحاوية وأضف حتى 12 عنصراً فرعياً وعدّل flex-grow وflex-shrink وflex-basis وorder وalign-self لكل عنصر. تطبق المعاينة كود CSS المولَّد نفسه بالضبط.

كيفية استخدام مولّد Flexbox CSS

اضبط الحاوية: flex-direction وflex-wrap وjustify-content وalign-items وalign-content وgap.
اختر عدد العناصر المعروضة في المعاينة.
حدّد عنصراً (بالزر أو بالنقر في المعاينة) واضبط flex-grow وflex-shrink وflex-basis وorder وalign-self.
غيّر حجم المعاينة بسحب زاويتها لترى استجابة التخطيط.
انسخ كود CSS لـ .container وقواعد .item-n.

مثال

الإدخال

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

الإخراج

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

متى تستخدم مولّد Flexbox CSS

استخدم flexbox للتخطيطات أحادية البعد: أشرطة التنقل وأشرطة الأدوات ومجموعات الأزرار وكائنات الوسائط والتوسيط. وللتخطيطات ثنائية البعد للصفحات بصفوف وأعمدة معاً فمولّد CSS Grid هو عادة الأداة الأفضل.

كيف يعمل مولّد Flexbox CSS

تحصل الحاوية دائماً على display: flex مع direction وwrap وjustify-content وalign-items. ولا يُكتب align-content إلا عندما يمكن للعناصر الالتفاف (فلا أثر له في سطر واحد)، ولا يُكتب gap إلا إذا كان أكبر من 0. أما العناصر فتُكتب فقط القيم المختلفة عن الافتراضية: flex: grow shrink basis عندما لا تكون 0 1 auto وorder عندما لا تكون 0 وalign-self عندما لا تكون auto، بقواعد تسمى .item-1 و.item-2… ويُعلَّم flex-basis غير الصالح ويُتجاهل.