مولد فليكس بوكس

يقوم Justify-content بوضع العناصر على طول المحور الرئيسي — الاتجاه الذي يتدفق فيه الصف أو العمود — بينما يقوم align-items بوضعها عبر المحور الآخر. قم بتبديل الاتجاه من الصف إلى العمود وتبديل المحورين، لذلك justify-content يبدأ العمل من الأعلى إلى الأسفل و align-items من اليسار إلى اليمين.

اختر عنصرًا حسب رقمه، ثم حدد مقدار نموه لملء المساحة المتاحة، ومقدار انكماشه عندما تضيق المساحة، وحجمه الابتدائي (basis)، ومحاذاته الخاصة على المحور المتقاطع. تنقل خاصية order العنصر إلى موضع أبكر أو لاحق على الشاشة من دون تعديل HTML. ولا تحصل على قاعدة CSS خاصة إلا العناصر التي تغيّرها بالفعل.

عند إيقاف الالتفاف، تُجبر كل العناصر على البقاء في سطر واحد وقد تنكمش. وعند تشغيله، تنتقل العناصر التي لم تعد تتسع إلى السطر التالي — وهنا تبدأ align-content في توزيع السطور كمجموعة. تحدد gap المسافة بين العناصر وبين السطور من دون استخدام الهوامش.