تصور حاوي flex والعناصر لرؤية كيفية وضع العناصر الفرعية داخل حاوي flex بوضوح
اضبط خصائص flexbox لملاحظة تأثيرات المحاذاة والتوزيع المختلفة
اتجاه عناصر flex
محاذاة العناصر على المحور المتقاطع
المحاذاة والتوزيع على المحور الرئيسي
ما إذا كانت العناصر تنتقل إلى أسطر جديدة
محاذاة الأسطر الملتفة على المحور المتقاطع
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchحاوي Flex مع عناصر بأحجام مختلفة لإظهار تأثيرات محاذاة flexbox
row - تدفق العناصر أفقياً (من اليسار إلى اليمين)row-reverse - تدفق العناصر أفقياً (من اليمين إلى اليسار)column - تدفق العناصر عمودياً (من الأعلى إلى الأسفل)column-reverse - تدفق العناصر عمودياً (من الأسفل إلى الأعلى)nowrap - العناصر تبقى في سطر واحدwrap - العناصر تلتف إلى أسطر جديدة حسب الحاجةwrap-reverse - العناصر تلتف إلى أسطر جديدة بترتيب عكسيflex-start - محاذاة العناصر إلى بداية المحور المتقاطعcenter - توسيط العناصر على المحور المتقاطعflex-end - محاذاة العناصر إلى نهاية المحور المتقاطعstretch - تمديد العناصر لملء المحور المتقاطعbaseline - محاذاة العناصر على طول خط الأساسflex-start - تجميع العناصر في بداية المحور الرئيسيcenter - توسيط العناصر على المحور الرئيسيflex-end - تجميع العناصر في نهاية المحور الرئيسيspace-* - توزيع المساحة بين العناصر