شرح صفوف ومحتوى الفقرة
تبدو الواجهات المقسومة جنباً إلى جنب مريحة على شاشات الحواسيب الواسعة، غير أن حشر عمودين متجاورين داخل شاشة هاتف عرضها 360px يضغط النصوص في شرائط ضيقة يصعب قراءتها. يعالج نظام Flexbox بنهج الهاتف أولاً هذه المشكلة بتبديل نظيف لاتجاه المحور:
- نبدأ القاعدة الأساسية للحاوية بالتصريحات
display: flex; flex-direction: column; gap: 16px;فتتراص اللوحات عمودياً بترتيب القراءة الطبيعي على الهواتف. - نضيف استعلام
@media (min-width: 768px)لتحويل الاتجاه إلىflex-direction: row;فور توفر مساحة أفقية كافية لاصطفاف العناصر متجاورة.
CSS
.flex-layout {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
.flex-layout {
flex-direction: row;
}
}