بعد أن تعلمنا في الدرس السابق كيفية ترتيب العناصر باستخدام Flexbox، ننتقل اليوم إلى التحكم في حجم العناصر داخل الحاوية من خلال 3 خصائص مهمة:
flex-growflex-shrinkflex-basis
ويمكن دمجها جميعًا باستخدام الخاصية المختصرة flex.
أولاً: flex-grow
تحدد مقدار توسّع العنصر داخل الحاوية عندما يتوفر فراغ إضافي.
.item {
flex-grow: 1;
}
- إذا أعطيت عنصرين
flex-grow: 1وflex-grow: 2، فالعنصر الثاني سيأخذ ضعف مساحة العنصر الأول.
مثال:
<div class="container">
<div class="item" style="flex-grow: 1;">1</div>
<div class="item" style="flex-grow: 2;">2</div>
</div>
ثانيًا: flex-shrink
تحدد مقدار تقلص العنصر عندما لا تكون هناك مساحة كافية داخل الحاوية.
.item {
flex-shrink: 1;
}
- إذا تم تعيين
flex-shrink: 0، فلن يتقلص العنصر أبدًا حتى لو ضاق المكان.
ثالثًا: flex-basis
تحدد الحجم الابتدائي للعنصر قبل توزيع المساحة الزائدة أو تقليصها.
.item {
flex-basis: 200px;
}
- تأخذ مكان
widthفي نظام Flexbox.
الخاصية المختصرة flex
تُستخدم لكتابة الثلاث خصائص في سطر واحد:
.item {
flex: 1 0 150px;
}
/* flex: grow shrink basis */
أو بشكل أبسط:
.item {
flex: 2; /* grow فقط والبقية افتراضية */
}
مثال عملي شامل:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #444;
}
.item {
padding: 20px;
color: white;
text-align: center;
}
.item1 {
background-color: #3498db;
flex: 1;
}
.item2 {
background-color: #e67e22;
flex: 2;
}
.item3 {
background-color: #2ecc71;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
الواجب العملي:
- جرّب تخصيص
flex-growوراقب كيف تتوزع المساحة بين العناصر. - اختبر
flex-shrinkعن طريق تصغير عرض المتصفح. - استخدم
flex-basisلتحديد حجم ابتدائي للعناصر.
