مولّد Flexbox

كيف يعمل

ليس Flexbox معقدًا، لكن شيئًا واحدًا فيه يوقع الجميع تقريبًا: justify-content وalign-items لا تعنيان أفقيًا ورأسيًا. بل تعنيان على امتداد الاتجاه وعبره، والاتجاه شيء تضبطه أنت.

الفخ، بوضوح

مع flex-direction: row يعمل justify-content أفقيًا وalign-items رأسيًا. وبالتبديل إلى column ينعكسان تمامًا. وكل ساعة تضيع مع flexbox هي في جوهرها هذا. ويتحدث الشرح أسفل الأداة عند تغيير الاتجاه لتكون العلاقة مرئية لا محفوظة.

المحور الرئيسي والمحور العرضي

المحور الرئيسي هو الذي تتدفق عليه العناصر، ويحدده flex-direction. والمحور العرضي عمودي عليه. يوزّع justify-content المساحة على امتداد المحور الرئيسي؛ ويضع align-items العناصر على المحور العرضي. وحين يثبت هذان الاسمان، يتضح الباقي.

gap، ولماذا حلّ محل الهوامش

يضع gap مسافة بين العناصر دون إضافتها خارج الأول والأخير، وهذا بالضبط ما تخطئ فيه الهوامش وما كان الناس يصلحونه بحيل :last-child. وهو مدعوم في كل المتصفحات الحالية ولم يعد هناك سبب لتجنبه.

nowrap تعني التقلّص لا الفيضان

الافتراضي هو nowrap، وتتقلص العناصر دون حجمها الطبيعي لتلائم بدلًا من الانتقال إلى سطر جديد. ولهذا ينضغط النص أحيانًا بشكل غير متوقع داخل صف flex. أما ضبط wrap فيتيح للعناصر النزول بدلًا من ذلك؛ وmin-width: 0 على عنصر ابن يمنعه من التقلص دون محتواه.

التوسيط في الاتجاهين

يوسّط justify-content: center مع align-items: center عنصرًا في الاتجاهين بصرف النظر عن flex-direction، وهي التوليفة الوحيدة التي تستحق الحفظ عن ظهر قلب.