CSS

CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS

ستتعلم في هذا الدرس نظام بناء صفحات الويب بنظام flex box الصناديق المرنة - فليكس بوكس وهي من الأنظمة الأكثر مرونة, وهو نظام حديث لتقسم صفحات الويب ليجعلها متجاوبه مع جميع الاجهزة.

التاريخ

24 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

5757

المواضيع

24
الشروحات chevron_left CSS Flexbox chevron_left CSS
CSS Flex Box keyboard_arrow_down

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;
}
مصطلحات الدرس
Flex
Flex

مرن

Box
Box

صندوق

Layout
Layout

تخطيط

Module
Module

وحدة

Position
Position

موقع / وضعية

Float
Float

عائم

Block
Block

كتلة

Inline
Inline

مضمن

Table
Table

جدول

Section
Section

قسم أو جزء

Container
Container

حاوية المحتوي

Items
Items

عناصر

Display
Display

شاشة

Properties
Properties

خصائص

Direction
Direction

اتجاه

Wrap
Wrap

لف / كسر

Flow
Flow

تدفق

justify
justify

تبرير

Content
Content

محتوي

Align
Align

محاذاة

Column
Column

عامود

Property
Property

خاصية

Reverse
Reverse

عكسي

Row
Row

صف

Center
Center

في المنتصف

Start
Start

بداية

End
End

النهاية

Space
Space

مسافة / تباعد

Around
Around

حول

Stretch
Stretch

تمدد

Baseline
Baseline

حدود

Perfect
Perfect

أفضل

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات