مطور / تخطيط CSS

ساحة Flexbox: عناصر تحكم CSS للحاوية والعناصر

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

ساحة Flexbox: عناصر تحكم CSS للحاوية والعناصر: يعرض حاوية Flex مباشرة مع خصائص قابلة للتحرير للعناصر، وشرحًا موجزًا بجانب كل عنصر تحكم. للمعاينة ارتفاع ثابت لإظهار تأثيرات المحور المتقاطع بوضوح. تتوفر تخطيطات الشبكة ذات الصفوف والأعمدة المشتركة في مولّد CSS Grid. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
أداة اختبار تخطيط Flexboxمعالجة محلية

تعمل بالكامل في المتصفح

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

استخدم flexbox لصف أو عمود. استخدم CSS Grid عندما تحتاج الصفوف والأعمدة إلى مسارات مشتركة. فتح منشئ CSS Grid

العنصر المحدد 1

نموذج تخطيط Flex

وحدة تخطيط الصندوق المرن في CSS من W3C، المستوى 1: https://www.w3.org/TR/css-flexbox-1/ . يُوزّع الحيز المتاح باستخدام أوزان نمو العناصر المرنة وانكماشها على المحور الرئيسي.

المحاذاة وإمكانية الوصول

المفاهيم الأساسية لـ Flexbox في MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . يكون المحور المتقاطع عموديًا على المحور الرئيسي، ولا تؤدي إعادة الترتيب المرئية إلى إعادة ترتيب المستند.

طريقة الاستخدام

  1. حدّد اتجاه الحاوية، والالتفاف، والمحاذاة.
  2. انقر على عنصر وغيّر حجمه ومحاذاته بشكل مستقل.
  3. أضف عناصر أو أزلها، وافحص التخطيط، وانسخ CSS المُنشأ.

الخصوصية والقيود

تُعالَج إعدادات التخطيط محليًا في المتصفح.

أدوات ذات صلة

شبكة CSSمسار القصمنسّق CSS

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

لماذا لا يفعل align-content شيئًا أحيانًا؟

إنه يوزّع أسطر Flex. ويحتاج إلى الالتفاف، وأسطر متعددة، ومساحة فارغة على المحور المتقاطع حتى يظهر تأثيره.

هل يغيّر order ترتيب قارئ الشاشة؟

لا. إنه يغيّر الترتيب المرئي، بينما يظل ترتيب القراءة في المستند وترتيب لوحة المفاتيح من دون تغيير. حافظ على ترتيب منطقي للمستند.

متى أستخدم Grid بدلًا من ذلك؟

استخدم Grid عندما ينبغي للصفوف والأعمدة مشاركة المسارات. يفيد Flexbox عند ترتيب العناصر أساسًا على محور واحد.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا