CSS Flex Responsive
تجاوب العناصر مع نظام flex box في لغة CSS
سوف تتعلم في هذا الدرس كيفية ضبط العناصر مع نظام flex box علي جميع الأجهزة في لغة CSS سواء لحاوية فليكس flex أو العناصر الداخلية.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Flex Responsive
تجاوب العناصر مع نظام flex box في لغة CSS
</>
CSS Flex Responsive
تجاوب العناصر مع نظام flex box في لغة CSS
عن طريق نظام media query مع نظام flex box يمكن أن يتغير شكل صفحة الويب من صفوف إلي أعمدة وذلك عندما يتغير flex-direction: row إلي flex-direction: column داخل media query.
CSS Flex Responsive
تحويل الصفوف إلي أعمدة عن طريق media query مع نظام flex box.
@media (max-width: 800px)
{
.flex-container
{
flex-direction: column;
}
}
Resize
</>
CSS Responsive Flexbox with wrap
إلتفاف العناصر داخل حاوية flex box في لغة CSS مع نظام media query
يمكن أن تلتف العناصر داخل حاوية flex box في لغة CSS مع نظام media query وذلك عندما يتم تحويل flex-wrap إلي القيمة wrap.
CSS Responsive Flexbox with wrap
إلتفاف العناصر عندما يكون العرض 800 أو أقل تظهر العناصر ملتفه وعرض العنصر يكون 100%.
@media (max-width: 800px)
{
.item
{
flex:100%;
}
}
</>
CSS responsive image gallery using flexbox
عارض الصور متجاوب بنظام flexbox في لغة CSS
CSS responsive image gallery using flexbox
عارض صور متجاوب مع نظام flex ونظام media query في لغة CSS.
@media (max-width: 800px)
{
.column {
flex: 50%;
max-width: 50%;
}
}
متجاوب
توجيه
اتجاه
صف
عامود
حدد
لف / كسر
حاوية المحتوي
صورة
موقع إنترنت
مرن
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
