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%;
}
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
