CSS Flexbox مشروح

كل خصائص flexbox الشائعة، مجمّعة حسب مكان تطبيقها: الحاوية والعنصر. يقرن كل صف الخاصية بقيمها الشائعة ووظيفتها.

يرتّب flexbox العناصر في بُعد واحد: صف أو عمود. اضبط display: flex على العنصر الأصلي ليصبح حاوية flex؛ وتصبح عناصره الأبناء المباشرة عناصر flex. تتحكم خصائص الحاوية في التوزيع على المحور الرئيسي والمحور المتقاطع؛ وتتحكم خصائص العنصر في كيفية نمو عنصر مفرد أو انكماشه أو محاذاته. اختر flexbox للأشرطة والصفوف والتوسيط أحادية البُعد.

جدول مرجعي · 13 إدخالات

13 of 13 rows


الحاوية
	flex \| inline-flex	يحوّل العنصر إلى حاوية flex.
	row \| column \| row-reverse \| column-reverse	يحدد المحور الرئيسي الذي تجري العناصر على طوله.
	flex-start \| center \| space-between \| space-around \| space-evenly	يوزّع العناصر على طول المحور الرئيسي.
	stretch \| center \| flex-start \| flex-end \| baseline	يحاذي العناصر على طول المحور المتقاطع.
	flex-start \| center \| stretch \| space-between	يحاذي الصفوف الملتفة عند وجود مساحة إضافية على المحور المتقاطع.
	nowrap \| wrap \| wrap-reverse	يتيح للعناصر الالتفاف إلى أسطر جديدة بدلًا من الانكماش.
	0.5rem \| 8px 16px	المسافة بين العناصر، أفقيًا ورأسيًا.
العنصر
	0 \| 1 \| 2	كم المساحة الحرة التي يستوعبها العنصر نسبةً إلى أشقائه.
	0 \| 1	كم ينكمش العنصر عندما لا تكفي المساحة.
	auto \| 200px \| 50%	الحجم الابتدائي قبل توزيع المساحة الحرة.
	1 \| 1 0 auto \| 0 0 200px	صيغة مختصرة لـ grow shrink basis.
	auto \| center \| flex-start \| flex-end \| stretch	يتجاوز align-items الخاص بالحاوية لعنصر واحد.
	0 \| -1 \| 2	يعيد ترتيب عنصر دون تغيير المصدر.