مسرح تجريبي ل CSS Flexbox مستكشف CSS Flexbox المرئي مع عناصر تحكم تفاعلية لجميع خصائص حاوية المرونة.

يتم تفعيل CSS Flexbox باستخدام display: flex على عنصر حاوية. تحدد الخاصية flex-direction المحور الرئيسي: صف (افتراضي، أفقي)، عمود (رأسي)، وتنوعاتهم العكسية. يوزع justify-content المساحة على المحور الرئيسي: flex-start، flex-end، center، space-between (مسافة متساوية بين العناصر)، space-around (مسافة متساوية حول العناصر)، و space-evenly. ترتب align-items على المحور العرضي: stretch (افتراضي، يملأ الارتفاع)، flex-start، flex-end، center، و baseline. flex-wrap: wrap يسمح للعناصر بالتدفق إلى السطر التالي عند حدوث溢ة. تضيف الخاصية gap مسافة متسقة بين العناصر دون الحاجة إلى هامش. يمكن لعناصر الفلكس استخدام flex-grow، flex-shrink، و flex-basis للتحكم في الحجم. يمكن لخاصية order إعادة ترتيب العناصر بدون تغيير HTML. Flexbox مثالية للتخطيطات أحادية البعد (صف واحد أو عمود)، بينما CSS Grid أفضل لتخطيطات ثنائية الأبعاد.