Softonic

مولد CSS Flexbox

خطوة 1 / 2 إنشاء CSS
التالي

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

كيفية إنشاء CSS

  1. 1

    اختر اتجاهًا

    اختر row أو column أو النسختين المعكوستين. يحدد هذا flex-direction، أي المحور الذي تتحرك العناصر على طوله.

  2. 2

    اضبط justify-content

    اختر كيفية توزيع العناصر على المحور الرئيسي: البداية أو المركز أو space-between أو space-around أو النهاية.

  3. 3

    اضبط align-items

    اختر كيفية محاذاة العناصر على المحور المتقاطع: stretch أو البداية أو المركز أو النهاية.

  4. 4

    اضبط الفجوة والالتفاف

    أضف تباعدًا بين العناصر بالبكسل، وحدد ما إذا كانت العناصر تلتف إلى سطر جديد.

  5. 5

    انسخ CSS

    يخرج المولّد قاعدة الحاوية بكل الخصائص، جاهزة للصق في ملف الأنماط.

خصائص الحاوية

الخاصية القيم التأثير
flex-direction row / column / row-reverse / column-reverse المحور الرئيسي
flex-wrap nowrap / wrap / wrap-reverse ما إذا كانت العناصر تلتف
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly التوزيع على المحور الرئيسي
align-items flex-start / center / flex-end / baseline / stretch محاذاة كل سطر على المحور المتقاطع
align-content نفس القيم + space-between / space-around عند الالتفاف: توزيع الأسطر على المحور المتقاطع
gap (row-gap, column-gap) الطول التباعد بين العناصر

خصائص العنصر

الخاصية القيم التأثير
flex-grow 0+ (بدون وحدة) حصة المساحة المتبقية التي يستوعبها
flex-shrink 0+ (بدون وحدة) حصة الفائض الذي يتقلص
flex-basis الطول أو auto الحجم الأولي قبل النمو/الانكماش
flex اختصار (1 1 auto، وما إلى ذلك) الثلاثة في وقت واحد
align-self auto / flex-start / center / flex-end / baseline / stretch يتجاوز align-items لعنصر واحد
order عدد صحيح إعادة الترتيب المرئي دون تغيير DOM

خدعة flex: 1

flex: 1 هو اختصار لـ flex: 1 1 0%. يجعل العنصر:

  • النمو لملء المساحة المتاحة (النمو: 1)
  • يتقلص إذا لزم الأمر (يتقلص: 1)
  • البدء من الحجم الصفري (الأساس: 0%)

بالنسبة للأعمدة ذات العرض المتساوي، يوفر flex: 1 على كل عنصر تقسيمًا مثاليًا. بالنسبة للأشرطة الجانبية التي لا ينبغي تقليصها أسفل المحتوى، استخدم flex: 0 0 240px (بدون نمو، بدون تقليص، على أساس 240 بكسل).

الأنماط الشائعة

** البطل المركزي **

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

** شريط التنقل مع الشعار على اليسار، والروابط على اليمين **

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* push right */
  display: flex;
  gap: 1rem;
}

** صف البطاقة المستجيبة **

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum before wrapping */
}

حقل النموذج مع زر (إدخال مرن، زر ثابت)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox مقابل الشبكة

  • Flexbox: بُعد واحد (صف أو عمود). من الأفضل أن تكون أحجام العناصر مستندة إلى المحتوى أو عندما تقوم بتوزيع المساحة على طول سطر واحد.
  • الشبكة: بعدان (صفوف وأعمدة بمسارات واضحة). الأفضل عندما يحتوي التخطيط على بنية صفوف وأعمدة في وقت واحد.

بالنسبة لشريط التنقل أو مجموعة البطاقات: Flexbox. بالنسبة لشبكة بطاقة المنتج التي تحتوي على صفوف متعددة من البطاقات المحاذاة: CSS Grid. تستخدم العديد من الصفحات الحقيقية كليهما، تخطيط صفحة الشبكة مع مكونات Flexbox الداخلية.

الأخطاء الشائعة

  • العناصر التي لا تملأ الحاوية: ينطبق align-items: stretch الافتراضي فقط إذا لم يكن للعناصر ارتفاع ثابت. مع الارتفاع الواضح، يظلون بهذا الحجم.
  • gap لا يعمل: تحقق من دعم المتصفح. هبطت الفجوة المرنة في وقت متأخر؛ Safari <14.1 لا يدعمه. أصبح الآن عالميًا في عام 2024+.
  • العناصر الفرعية للعمود المرن: يحتوي العمود المرن على align-items: stretch كإعداد افتراضي، مما يؤدي إلى تمديد العناصر إلى عرض الحاوية. إذا قام طفل واحد بتعيين العرض، فإنه ينفجر.
  • order مرئي فقط: تتبع برامج قراءة الشاشة والتنقل عبر لوحة المفاتيح ترتيب DOM. لا تستخدم order لجعل المحتوى منطقيًا؛ استخدامه للتلميع البصري فقط.

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

شبكة لتخطيطات الصفحات ثنائية الأبعاد (الصفوف والأعمدة معًا). Flexbox للتوزيعات أحادية البعد (شريط التنقل، صف الزر، المكدس). داخل خلية الشبكة، Flexbox لتخطيطها الداخلي. تستخدم معظم واجهات المستخدم المعقدة كليهما.

لأن الإعداد الافتراضي لـ flex-shrink هو 1، لكن الإعداد الافتراضي لـ min-width هو auto، وهو ما يساوي عرض المحتوى. قم بتعيين min-width: 0 (أو min-inline-size: 0) على العنصر للسماح له بالانكماش إلى ما دون حجمه الأساسي.

display: flex; justify-content: center; align-items: center; على الحاوية. يغطي الغالبية العظمى من حالات “توسيط هذا الشيء” بخطين.

نعم، في جميع المتصفحات الحديثة. كان Safari متأخرًا (أضيف في 14.1، أبريل 2021)؛ واليوم يدعمه كل متصفح رئيسي. استبدل التباعد المستند إلى margin بـ gap كلما أمكن ذلك - وهو أمر أبسط بكثير.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى