ما هو Flexbox؟

ما هو Flexbox؟

Flexbox أو Flexible Box Model هو نظام تصميم CSS قوي ومُصمم ليوفر مرونة في توزيع المسافات وتنسيق العناصر داخل حاوية (Container).

ميزته الأساسية هي تسهيل التحكم بمحاذاة العناصر، توزيع المسافات بينها، وتحديد الاتجاه والطريقة التي تظهر فيها داخل الحاوية.

أهم المصطلحات في Flexbox:

1. Flex Container: العنصر الأب الذي يحتوي على العناصر المرنة (flex items).  يتحول إلى Flex Container عند تطبيق خاصية display: flex;.
2. Flex Items: العناصر الداخلية (الأبناء) التي تتأثر بتخصيصات الـ Flexbox.

.parent {
display: flex; /* تحويل العنصر إلى Flex Container */
}

أهم خواص Flexbox:

1. خواص Flex Container (العنصر الأب):

1.1. display

• القيمة: flex أو inline-flex.
• المعنى: تحدد أن العنصر يصبح Flex Container.

1.2. flex-direction

• القيم المتاحة:
  • row (افتراضي): العناصر بترتب أفقيًا من اليسار لليمين.
  • row-reverse: العناصر بترتب أفقيًا من اليمين لليسار.
  • column: العناصر بترتب عموديًا من الأعلى للأسفل.
  • column-reverse: العناصر بترتب عموديًا من الأسفل للأعلى.

.parent {
display: flex;
flex-direction: column; /* ترتيب العناصر عمودياً */
}

1.3. justify-content

• القيم المتاحة:
  • flex-start (افتراضي): العناصر تتراكم في بداية المحور الأساسي.
  • flex-end: العناصر تتراكم في نهاية المحور الأساسي.
  • center: العناصر تكون في منتصف المحور الأساسي.
  • space-between: المسافات بين العناصر متساوية.
  • space-around: المسافات حول كل عنصر تكون متساوية

• .parent {
  
  display: flex;
  
  justify-content: space-between; /* توزيع المسافة بشكل متساوي بين العناصر */
  
  }

1.4. align-items

• القيم المتاحة:
  • stretch (افتراضي): العناصر تمتد لملء الحاوية.
  • flex-start: العناصر تتراكم في بداية المحور الفرعي.
  • flex-end: العناصر تتراكم في نهاية المحور الفرعي.
  • center: العناصر تكون في منتصف المحور الفرعي.
  • baseline: محاذاة العناصر بناءً على الخط الأساسي للنص.

.parent {
display: flex;
align-items: center; /* العناصر تتواجد في منتصف الحاوية عموديًا */
}

1.5. align-content

• القيم المتاحة:
  • flex-start: تراكم الأسطر في بداية المحور الفرعي.
  • flex-end: تراكم الأسطر في نهاية المحور الفرعي.
  • center: تراكم الأسطر في المنتصف.
  • space-between: المسافة بين الأسطر تكون متساوية.
  • space-around: المسافة حول كل سطر تكون متساوية.
  • stretch (افتراضي): الأسطر تمتد لملء الحاوية.

 .parent {
display: flex;
align-content: space-around; /* توزيع المسافات حول الأسطر */
}

1.6. gap

• القيمة: تحدد المسافة بين العناصر.

.parent {
display: flex;
gap: 20px; /* مسافة 20 بكسل بين كل عنصر والتاني */
}

2. خواص Flex Items (العناصر الداخلية):

2.1. order

• القيمة: رقمية (القيمة الافتراضية: 0).
• المعنى: تحدد ترتيب العنصر داخل الحاوية.
• .box-1 {
  order: 2; /* وضع العنصر في الترتيب الثاني */
  }
  .box-2 {
  order: 1; /* وضع العنصر في الترتيب الأول */
  }

2.2. flex-grow

• القيمة: رقمية (القيمة الافتراضية: 0).
• المعنى: تحدد مدى نمو العنصر لملء المساحة المتاحة.
• .box {
  flex-grow: 1; /* كل العناصر تنمو بالتساوي */
  }

2.3. flex-shrink

• القيمة: رقمية (القيمة الافتراضية: 1).
• المعنى: تحدد مدى تقلص العنصر عند عدم وجود مساحة كافية.
• .box {
  flex-shrink: 0; /* منع العناصر من التقلص */
  }

2.4. flex-basis

• القيمة: auto أو أي قيمة بحجم (مثل px, %).
• المعنى: تحدد الحجم الأساسي للعنصر قبل تطبيق flex-grow أو flex-shrink.
• .box {
  flex-basis: 100px; /* تحديد الحجم الأساسي بـ 100 بكسل */
  }

2.5. align-self

• القيم المتاحة: نفس قيم align-items.
• المعنى: تحدد المحاذاة للعنصر الواحد فقط ضمن الحاوية.
• .box-1 {
  align-self: flex-end; /* محاذاة العنصر لنهاية الحاوية */
  }

أمثلة عملية:

مثال 1: ترتيب العناصر أفقيًا مع توزيع المسافات بالتساوي

و هذه النتيجة :

و هذا هو الكود يمكنك نسخه:

.parent {

    display: flex;

    justify-content: space-between; /* توزيع المسافة بين العناصر بالتساوي */

    width: 100%;

    height: 300px;  /* لكي يكون في مساحة في الخلفية */

    background-color: rgb(0, 0, 0);

}

.box {

    background-color: blueviolet;

    color:aliceblue;

    width: 50px;

    padding: 5px;

    height: 50px;

}

مثال 2: ترتيب العناصر عموديًا بمحاذاة وسط الحاوية

و هذا هو الكود الان جرب بنفسك :

.parent {

    display: flex;

    flex-direction: column; /* ترتيب عمودي */

    align-items: center; /* محاذاة العناصر في الوسط عموديًا */

    height: 300px;

    border: 2px solid black;

    background-color: black;

}

.box {

    background-color: rgb(154, 35, 194);

    color: aliceblue;

    width: 50px;

    height: 50px;

    padding: 5px;

}