CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS
ستتعلم في هذا الدرس نظام بناء صفحات الويب بنظام flex box الصناديق المرنة - فليكس بوكس وهي من الأنظمة الأكثر مرونة, وهو نظام حديث لتقسم صفحات الويب ليجعلها متجاوبه مع جميع الاجهزة.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS
</>
CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS
flex box الصناديق المرنة - فليكس بوكس في لغة CSS هي من أكثر أنظمة بناء صفحات الويب شهرة وهو من أسهل الأنظمة ايضاً حيث يمكنك التحكم بطريقة بسيطة جداً في تسقيم صفحة الويب وتكون مرنة ومتجاوبة مع جميع الأجهزة.
responsive web page تجاوب الصفحات مع جميع الأجهزة:
ويعني ذلك أن صفحة الويب تتلائم مع جميع الأجهزة أي كان حجم هذا الجهاز ففي أجهزة الكمبيوتر يظهر الصف مثلاً به 12 صندوق وعلي أجهزة الهواتف يظهر الصف به صندوق واحد أو صندوقين أو ثلاث صناديق فقط نظراً لعدم وجود مساحة كافية وباقي الصناديق يتم توزيعها بشكل تلقائي علي صفوف أخري وعلي أجهزة التابلت يظهر 6 صناديق فقط ويمكن التحكم في عدد الصناديق التي تعرض عن طريق نظام flex box في لغة CSS.
معلومات حول نظام flex box:
- يستخدم نظام flex box بدون نظام float في لغة CSS إلا في بعض الحالات النادرة.
- يستخدم نظام flex box بدون نظام position في لغة CSS إلا في بعض الحالات النادرة.
- يعد تقسيم الصفحات بواسطة بنظام flex box أفضل من نظام float و نظام position في لغة CSS.
- نظام flex box يأتي علي هيئة container حاوية بداخلها items عناصر.
- يمكن أن تكون الحوايات nested container متداخلة مع نظام flex box.
- يمكن أن يكون item العنصر هو أب أو حاوية لعناصر أخري مع نظام flex box.
- بواسطة flex box يمكن أن تتمدد العناصر بداخل الحاوية لصفوف أخري ويمكن أن تكون في نفس الصف.
- نظام flex هو أحدي القيم التي تكون تابعة لخاصية display:flex في لغة CSS.
- يوجد مجموعة خصائص مساعدة لخاصية display:flex في لغة CSS.
flex wrap
قم بتصغير الصفحة حتي تشاهد تمدد العناصر أو التفافها الي صفوف اخري.
flex no wrap
قم بتصغير الصفحة حتي تشاهد عدم تمدد العناصر أو التفافها الي صفوف اخري.
</>
CSS Flex Container
حاوية flex box في لغة CSS
flex box container حاوية الفليكس بوكس هي عبارة عن div أو أي عنصر أخر يحتوي علي عناصر داخلية ففي هذة الحالة يطلق عليه flex container بشرط أن تكون طريقة عرضة هي display:flex في لغة CSS.
CSS Create Flex Container
يتم إنشاء flex container عن طريق إضافة display:flex ولكي يظهر flex container علي المتصفح يجب أن يكون له عرض وطول وخلفية لون في لغة CSS.
CSS Create Flex Container
يتم إنشاء flex container عن طريق إضافة display:flex ولكي يظهر flex container علي المتصفح يجب أن يكون له عرض وطول وخلفية لون في لغة CSS.
.flex-container
{
display: flex;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
height:100px;
}
</>
CSS flex container properties
جميع خصائص حاوية flex في لغة CSS
في لغة CSS مجموعة عناصر مساعدة لحاوية flex حتي نتحكم بشكل كامل في العناصر الداخلية أو في الحاوية.
الخصائص التي تستخدم مع flex container:
- flex-direction للتحكم في طريقة عرض flex container بشكل أفقي أو رأسي.
- flex-wrap للتحكم في إلتفاف العناصر في صفوف جديدة في حال عدم وجود مساحه لهم.
- flex-flow لكتابة قمية خاصية flex-direction وخاصية flex-wrap في خاصية واحدة.
- justify-content للتحكم في العناصر الداخلية بشكل أفقي أن تكون في الوسط أو علي اليسار أو علي الجانب الأيمن.
- align-items للتحكم في العناصر بشكل رأسي أن تكون في المنتصف أو علي بالأسفل أو بلأعلي.
- align-content لعمل مساحات حول العناصر أو بينها حتي لا تكون العناصر قريبة من بعضها.
flex row
عرض الحاوية كصف في لغة CSS.
Flex column
عرض الحاوية كعمود في لغة CSS.
</>
CSS Flex items
عناصر حاوية flex box في لغة CSS
CSS Flex items العناصر الداخلية لحاوية الفليكس بوكس تسمي flex items وهي خاضعة لجميع خصائص الحاوية وفي لغة CSS لهذة العناصر مجموعة خصائص سنتعرف عليها في الدروس المقبلة.
CSS Create Flex Items
قم بإزالة خاصية height من flex container لكي يتمدد علي حسب المحتوي الداخلي.
CSS Create Flex Items
قم بإزالة خاصية height من flex container لكي يتمدد علي حسب المحتوي الداخلي.
.item
{
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
مرن
صندوق
تخطيط
وحدة
موقع / وضعية
عائم
كتلة
مضمن
جدول
قسم أو جزء
حاوية المحتوي
عناصر
شاشة
خصائص
اتجاه
لف / كسر
تدفق
تبرير
محتوي
محاذاة
عامود
خاصية
عكسي
صف
في المنتصف
بداية
النهاية
مسافة / تباعد
حول
بين
تمدد
حدود
أفضل
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
