هذا تنسيق شائع للمواقع الإلكترونية التسويقية، على سبيل المثال، التي قد تتضمّن صفًا من ثلاثة عناصر، عادةً ما يكون فيها صورة وعنوان ثم بعض النصوص التي تصف بعض ميزات المنتج. على الشاشات الأصغر حجمًا، يجب أن يتم تجميعها بشكلٍ جيد، وتوسيعها عند زيادة حجم الشاشة.
باستخدام flexbox لهذا التأثير، لن تحتاج إلى طلبات بحث الوسائط لتعديل موضع هذه العناصر عند تغيير حجم الشاشة.
يشير الاختصار flex إلى: flex: <flex-grow> <flex-shrink> <flex-basis>
.
flex-grow
التمدد
إذا كنت تريد أن تتمدد المربّعات وتملأ المساحة أثناء لفّها إلى السطر التالي، اضبط قيمة <flex-grow>
على 1، على سبيل المثال:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
الآن، عند زيادة حجم الشاشة أو تصغيرها، يتم تصغير عناصر Flex هذه وتكبيرها.
لا يتم تمديدها
إذا أردت أن تملأ المربّعات حجمها <flex-basis>
، وتصغيرها عند استخدام أحجام أصغر، ولكن بدون تمديدها لملء أي مساحة إضافية، اكتب: flex: 0 1 <flex-basis>
. في هذه الحالة، يكون <flex-basis>
150 بكسل:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
HTML
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
CSS
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}