ساحة تجارب CSS Flexbox
تعلّم وجرّب CSS Flexbox عملياً. اضبط خصائص الحاوية وشاهد تحديث التخطيط مباشرة. أداة تعليمية مثالية لفهم سلوك Flexbox.
الميزات
طريقة الاستخدام
1. اضبط خصائص الحاوية (الاتجاه، الالتفاف، justify-content، align-items).
2. أضف عناصر أو أزلها.
3. شاهد تحديث التخطيط مباشرة وانسخ شفرة CSS.
حول هذه الأداة
يرتّب Flexbox العناصر على محور واحد — صف أو عمود — ويوزّع المساحة بينها. تكمن الصعوبة في أن عدة خصائص تتفاعل معًا: flex-direction تحدد المحور الرئيسي، وjustify-content تحاذي العناصر على امتداده، وalign-items تحاذيها على المحور المتعامد، وflex-wrap تقرر انتقالها إلى سطر جديد، وgap تضبط تباعدًا ثابتًا. تتيح لك ساحة التجربة هذه تغيير كل خاصية ورؤية إعادة ترتيب الصناديق الملونة فورًا، وهي أسرع طريقة لبناء الحدس أو تصحيح تخطيط لا يتصرف كما تريد. أضف عناصر أو احذفها لاختبار الالتفاف، ثم انسخ CSS الناتج للحاوية. أما التخطيطات ثنائية البعد التي يجب أن تتحاذى فيها الصفوف والأعمدة، فغالبًا ما يكون CSS Grid هو الأداة الأنسب.