ما هو Flexbox؟
نظام Flexbox هو نموذج تخطيط (layout model) في CSS يُستخدم لترتيب العناصر داخل الحاويات بشكل مرن وسهل، سواء أفقياً أو عمودياً.
تفعيل Flexbox
يتم تفعيل Flexbox بكتابة:
.container {
display: flex;
}
هذا يجعل جميع العناصر داخل .container تصبح عناصر مرنة (flex items).
مثال بسيط:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #444;
}
.item {
background-color: #d1ecf1;
padding: 20px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">عنصر 1</div>
<div class="item">عنصر 2</div>
<div class="item">عنصر 3</div>
</div>
</body>
</html>
أهم الخصائص التي تُستخدم مع Flexbox:
1. flex-direction
تحدد اتجاه العناصر داخل الحاوية.
.container {
display: flex;
flex-direction: row; /* أفقي (افتراضي) */
flex-direction: row-reverse; /* أفقي معكوس */
flex-direction: column; /* عمودي */
flex-direction: column-reverse; /* عمودي معكوس */
}
2. justify-content
تحدد محاذاة العناصر أفقياً داخل الحاوية.
.container {
justify-content: flex-start; /* بداية السطر (افتراضي) */
justify-content: flex-end; /* نهاية السطر */
justify-content: center; /* في المنتصف */
justify-content: space-between; /* تباعد متساوٍ بين العناصر */
justify-content: space-around; /* تباعد خارجي متساوٍ */
}
3. align-items
تحدد محاذاة العناصر عموديًا داخل الحاوية.
.container {
align-items: stretch; /* تمدد العناصر (افتراضي) */
align-items: flex-start; /* محاذاة من الأعلى */
align-items: flex-end; /* محاذاة من الأسفل */
align-items: center; /* في المنتصف عموديًا */
}
أمثلة إضافية:
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 200px;">
<div class="item">عنصر وسط الحاوية</div>
</div>
نصائح:
- Flexbox مناسب للعناصر في صف واحد أو عمود واحد.
- يُفضل على
floatوinline-blockلتنظيم العناصر الحديثة. - يمكنك استخدام Flexbox لبناء ترويسة، شريط تنقل، بطاقات، أزرار، وغير ذلك بسهولة.
الواجب العملي:
- أنشئ ثلاثة صناديق داخل
divواستخدمdisplay: flexلترتيبها أفقيًا. - جرّب جميع قيم
justify-contentوalign-items. - بدّل بين
flex-direction: rowوflex-direction: columnولاحظ الفرق.