استجابة فليكس CSS
Flexbox سريع الاستجابة
لقد تعلمت من فصل CSS Media Queries أنه يمكنك استخدام استعلامات الوسائط لإنشاء تخطيطات مختلفة لأحجام الشاشات والأجهزة المختلفة.
أجهزة الكمبيوتر المحمول وأجهزة الكمبيوتر المكتبية:
الهواتف
والأجهزة اللوحية:على سبيل المثال ، إذا كنت تريد إنشاء تخطيط من عمودين لمعظم أحجام الشاشات ، وتخطيط من عمود واحد لأحجام الشاشات الصغيرة (مثل الهواتف والأجهزة اللوحية) ، فيمكنك تغيير flex-direction
من row
إلى column
عند نقطة توقف معينة (800 بكسل في المثال أدناه):
مثال
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
هناك طريقة أخرى وهي تغيير النسبة المئوية flex
لخصائص العناصر المرنة لإنشاء تخطيطات مختلفة لأحجام شاشات مختلفة. لاحظ أنه يتعين علينا أيضًا تضمين flex-wrap: wrap;
الحاوية المرنة لكي يعمل هذا المثال:
مثال
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
معرض الصور المتجاوب باستخدام Flexbox
استخدم Flexbox لإنشاء معرض صور متجاوب يتنوع بين أربع أو صورتين أو صور كاملة العرض ، حسب حجم الشاشة:
موقع مستجيب باستخدام Flexbox
استخدم flexbox لإنشاء موقع ويب سريع الاستجابة ، يحتوي على شريط تنقل مرن ومحتوى مرن: