CSS: Flexbox
تعلّم Flexbox في CSS مع أمثلة عملية.
CSS — Flexbox
مقدمة
Flexbox يرتّب العناصر أفقياً/عمودياً مع تحكم بالمحاذاة.
ماذا ستتعلم؟
- display:flex
- justify-content
- align-items
- gap
- flex:1
الصياغة
.wrap{ display:flex; }
مثال
.wrap{ display:flex; gap:12px; }
.box{ flex:1; padding:16px; border:1px solid #e5e7eb; border-radius:14px; text-align:center; }
ملاحظات
- استخدم gap للمسافات.
- flex:1 لتقسيم المساحة.
جرّب بنفسك: افتح Playground: /ar/playground/html