6XC

ملعب CSS Flexbox

اضبط flex-direction وjustify-content وalign-items وwrap وgap على صناديق حيّة، ثم انسخ كود CSS الخاص بالحاوية.

846 مشاهدة

1
2
3
4
5

Flexbox باختصار

يحوّل ضبط display: flex الحاوية إلى محرك تخطيط أحادي البعد. توزّع justify-content العناصر على المحور الرئيسي، وتُحاذيها align-items على المحور العرضي، بينما تختار flex-direction المحور، وتضع gap مسافات بين العناصر دون هوامش. جرّب عناصر التحكم وشاهد الصناديق المرقّمة تعيد ترتيب نفسها مباشرة.

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

كيف أُوسّط عنصرًا توسيطًا مثاليًا؟

السطور الثلاثة الشهيرة: display: flex; justify-content: center; align-items: center; — توسيط أفقي وعمودي دفعة واحدة.

Flexbox أم Grid؟

يتفوّق Flexbox في الصفوف أو الأعمدة أحادية البعد التي تتحدّد بحجم المحتوى (أشرطة الأدوات، التنقل، صفوف البطاقات). أمّا Grid فمصمَّم للتخطيطات ثنائية الأبعاد بمسارات صريحة. يعملان معًا بشكل جيد.

أدوات مشابهة

منشئ تدرجات CSS صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة. أنشئ منشئ ظل الصندوق CSS صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية. أنشئ منشئ استدارة الحواف CSS دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ. أنشئ منشئ ظل النص CSS صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي. أنشئ