أسرار Flexbox: دليل عملي لتوزيع العناصر في CSS

هل سبق وأن شعرت بالإحباط أثناء محاولة محاذاة العناصر على موقعك باستخدام CSS؟ ربما قضيت ساعات في تجربة مختلف القيم لتحديد المواقع، دون أن تصل إلى النتيجة المثالية. هنا يأتي دور Flexbox،

التقنية السحرية التي أحدثت ثورة في عالم تصميم المواقع. بفضل خصائصها البسيطة والمرنة، يمكنك الآن توزيع العناصر ومحاذاتها بسهولة مذهلة. سواء كنت مبتدئًا أو محترفًا في تطوير الويب، فإن تعلم Flexbox سيفتح لك آفاقًا جديدة في تصميم واجهات المستخدم بشكل أنيق وفعال.

في هذه المقالة، سنأخذك في رحلة شيقة لاكتشاف أسرار Flexbox وكيف يمكنك الاستفادة منها لتبسيط حياتك كمطور.

مقدمة Flexbox: الخطوة نحو إتقان التوزيع والمحاذاة في CSS

أسرار Flexbox: دليل عملي لتوزيع العناصر في CSS

من هنا نبدأ رحلتنا نحو المستوى المتوسط في استخدام CSS مع أداة رائعة ومبتكرة تُعرف باسم Flexbox، أو كما يسميها الجميع ببساطة "فليكس". تعتبر هذه التقنية ثورة حقيقية في كيفية توزيع ومحاذاة العناصر داخل الحاويات، حيث تجعل من السهل جدًا تحقيق نتائج بصرية مذهلة تُشبه تلك التي تجدها في أدوات التصميم مثل Adobe Illustrator، ولكن باستخدام الكود فقط.

قبل ظهور Flexbox، كان ترتيب العناصر داخل الصفحة ومحاذاتها بشكل مثالي يمثل تحديًا كبيرًا للمطورين. ومع ذلك، جاءت هذه التقنية لتغيير كل شيء، حيث أصبحت تتيح الحاويات المرنة (Flex Containers) إمكانية توزيع العناصر داخلها بشكل سلس ومرن، سواء كان ذلك للتوسيع أو المحاذاة أو التوزيع.

دعونا نغوص في تفاصيل Flexbox ونستكشف مميزاته وأسلوبه في العمل، مع شرح كل خطوة بأسلوب عملي وواضح مدعوم بالأمثلة.

1. تعريف Flexbox وأهميته

Flexbox هو اختصار لـ "Flexible Box Module"، ويعد أداة قوية لتوزيع العناصر ومحاذاتها داخل صفحات الويب. ما يميز Flexbox هو المرونة وسهولة الاستخدام مقارنة بالتقنيات التقليدية في CSS.

2. المشكلة قبل Flexbox

قبل ظهور Flexbox، كان ترتيب العناصر داخل الحاويات يتطلب الكثير من الجهد والكود، مثل استخدام float وpositioning، مما جعل الأمر معقدًا وأحيانًا غير عملي.

3. ما الذي يقدمه Flexbox؟

Flexbox يوفر إمكانيات مدهشة تشمل:

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

4. الحاوية والعناصر: المصطلحات الأساسية

• الحاوية (Container): هي العنصر الرئيسي الذي يحتوي على عناصر أخرى بداخله.
• العناصر (Items): هي العناصر الفردية الموجودة داخل الحاوية.

5. البدء باستخدام Flexbox

استخدام Flexbox سهل للغاية. كل ما عليك فعله هو تعيين خاصية display الخاصة بالحاوية إلى flex، وبعد ذلك يمكنك الاستفادة من مجموعة كبيرة من الخصائص لتخصيص التوزيع والمحاذاة.

مثال عملي بسيط

مثال عملي بسيط على Flexbox

كود HTML

<div class="container">
    <div class="box" id="one">Box One - 1</div>
    <div class="box" id="two">Box Two - 2</div>
    <div class="box" id="three">Box Three - 3</div>
</div>

في هذا المثال، لدينا إعداد HTML بسيط يتضمن:

• عنصر div رئيسي مع class يُسمى container.
• ثلاثة عناصر فرعية داخل الحاوية الرئيسية، كل منها يحمل class يُسمى box، مع id مميز: one، two، وthree.

كود CSS

body {
    background-color: brown;
    color: #ccc;
}

.container {
    display: flex;
    flex-direction: column; /* المحور الرئيسي عمودي */
    justify-content: center; /* محاذاة العناصر على المحور الرئيسي */
    align-items: flex-start; /* محاذاة العناصر على المحور البديل */
    border: 2px solid #fff;
    padding: 5px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    width: 200px;
    height: 120px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

بمجرد تطبيق الكود أعلاه على الحاوية، يمكننا استخدام العديد من الخصائص مثل justify-content وalign-items لتحقيق التصميم المطلوب كما نرى وهذه مجرد البداية فقط.

محاور واتجاهات Flexbox: فهم الأساسيات

Flexbox يعتمد بشكل كبير على مفهوم المحاور والاتجاهات، مما يتيح لك التحكم الكامل في توزيع العناصر ومحاذاتها داخل الحاوية. في هذا القسم، سنتعرف على المحاور (الرئيسي والبديل) وكيف يؤثر تغيير الاتجاهات على تصميمك.

1. المحاور في Flexbox

Flexbox يعتمد على محورين رئيسيين:

• المحور الرئيسي (Main Axis): يتم تحديده باستخدام الخاصية flex-direction.
• المحور البديل (Cross Axis): وهو المحور المعاكس للمحور الرئيسي.

2. القيم الممكنة لـ flex-direction

هناك أربع قيم رئيسية تؤثر على اتجاه العناصر داخل الحاوية:

1. row: المحور الرئيسي أفقي (من اليسار إلى اليمين).
2. row-reverse: المحور الرئيسي أفقي (من اليمين إلى اليسار).
3. column: المحور الرئيسي رأسي (من الأعلى إلى الأسفل).
4. column-reverse: المحور الرئيسي رأسي (من الأسفل إلى الأعلى).

Flexbox Row and Row Reverse Directions

Flexbox Column and Column Reverse Directions

مثال عملي:

.container {
    display: flex;
    flex-direction: row; /* يمكن تغييرها إلى أي من القيم الأربعة */
}

3. كيف تعمل المحاور؟

• عند اختيار row أو row-reverse، يصبح المحور الرئيسي أفقيًا، بينما يكون المحور البديل رأسيًا.
• عند اختيار column أو column-reverse، يصبح المحور الرئيسي رأسيًا، بينما يكون المحور البديل أفقيًا.

ملاحظات:

• المحور الرئيسي يحدد كيفية ترتيب العناصر داخل الحاوية.
• المحور البديل يؤثر على المحاذاة العمودية أو الأفقية للعناصر.

4. التفاعل مع خصائص المحاذاة

Flexbox يقدم خصائص مثل justify-content و align-items للتحكم في توزيع العناصر ومحاذاتها على المحاور:

• justify-content: تعمل على المحور الرئيسي.
• align-items: تعمل على المحور البديل.

مثال عملي:

إستخدام Justify Content مع Align Items

.container {
    display: flex;
    flex-direction: row; /* المحور الرئيسي أفقياٌ */
    justify-content: center; /* محاذاة العناصر على المحور الرئيسي */
    align-items: flex-start; /* محاذاة العناصر على المحور البديل */
    border: 2px solid #fff;
    padding: 5px;
    height: 500px;
}

5. تأثير تغيير الاتجاه

• بتغيير قيمة flex-direction، تتغير كيفية تفاعل العناصر مع المحورين.
• على سبيل المثال، عند التبديل من row إلى column، يصبح المحور الرئيسي عموديًا (أعلى-أسفل) والمحور البديل أفقيًا (يسار-يمين).

6. علاقة المحاور بـ Flexbox بشكل عام

كل خصائص Flexbox تقريبًا مثل justify-content و align-items و align-self تعتمد على المحاور التي تحددها. لذا، فهم المحاور والاتجاهات هو الخطوة الأولى لإنشاء تخطيطات مرنة ومتجاوبة.

خصائص الحاوية (Flex Container Properties)

توضيح الخصائص التي يتم تطبيقها على الحاوية:

• display: flex و inline-flex: تنشيط Flexbox.
• flex-direction: تحديد اتجاه المحور (أفقي/عمودي).
• flex-wrap: التحكم في التفاف العناصر.
• flex-flow: الخاصية المختصرة لـ flex-direction و flex-wrap.
• justify-content: محاذاة العناصر على المحور الرئيسي.
• align-items: محاذاة العناصر على المحور المتقاطع.
• align-content: التحكم في توزيع الصفوف المتعددة (عند الالتفاف).

خصائص العناصر (Flex Item Properties)

توضيح الخصائص التي تؤثر على العناصر داخل الحاوية:

• flex-grow: التحكم في كيفية تمدد العناصر.
• flex-shrink: التحكم في كيفية تقلص العناصر.
• flex-basis: تحديد الحجم الأساسي للعنصر.
• flex: الخاصية المختصرة لـ flex-grow و flex-shrink و flex-basis.
• align-self: تخصيص محاذاة عنصر معين دون التأثير على البقية.

محاذاة العناصر وتوزيعها باستخدام Flexbox

تُعتبر خاصية Flexbox واحدة من أهم الأدوات التي تُسهّل محاذاة العناصر وتوزيعها داخل الحاويات. كان التنسيق التقليدي باستخدام position: absolute أو relative يستغرق الكثير من الوقت، ولكن Flexbox حلّ هذه المشكلة بفضل خواصه البسيطة والفعّالة. هنا سنستعرض ميزتين رئيسيتين: align-items وjustify-content، وكيف يمكن استخدامهما بشكل عملي.

1. خاصية justify-content: توزيع العناصر على المحور الأساسي

تتحكم خاصية justify-content في توزيع العناصر على المحور الأساسي (الذي يتم تحديده باستخدام خاصية flex-direction).

القيم الشائعة:

• flex-start: يتم ترتيب العناصر من بداية المحور.
• center: يتم وضع العناصر في منتصف المحور.
• flex-end: يتم ترتيب العناصر في نهاية المحور.
• space-between: توزيع العناصر مع وجود مسافات متساوية بينها.
• space-around: توزيع العناصر مع وجود مسافات متساوية من الأطراف وبين العناصر.
• space-evenly: توزيع العناصر بحيث تكون المسافات متساوية تمامًا بين كل العناصر والأطراف.

القيم الشائعة لـ justify-content

مثال عملي:

.container {
  display: flex;
  justify-content: space-around; /* توزيع العناصر مع وجود مسافات متساوية */
}

2. خاصية align-items: محاذاة العناصر على المحور العمودي

تتحكم خاصية align-items في محاذاة العناصر على المحور العمودي (وهو المحور المتعامد مع المحور الأساسي).

القيم الشائعة:

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

القيم الشائعة لـ align-items

مثال عملي:

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

دمج القيم للحصول على تنسيق مثالي

عند استخدام justify-content مع align-items معًا، يمكن إنشاء تصميمات متطورة تُناسب جميع أنواع التخطيطات.

مثال:

أستخدام justify-content مع align-items

.container {
  display: flex;
  justify-content: center; /* توزيع العناصر في المنتصف أفقيًا */
  align-items: flex-end;  /* محاذاة العناصر في نهاية المحور العمودي */
}

أستخدام justify-content مع align-items

التفاف العناصر وتوزيعها باستخدام Flexbox

Flexbox هو أداة قوية لتوزيع العناصر داخل الحاويات بشكل مرن ومنظم. في هذا الشرح، سنستعرض ثلاث خصائص أساسية: align-content، flex-wrap، بالإضافة إلى الفرق بين align-content و align-items، لتوضيح دور كل منها في ترتيب العناصر داخل الحاوية.

1. خاصية flex-wrap: التفاف العناصر

تتحكم خاصية flex-wrap في ما إذا كانت العناصر ستلتف إلى صفوف جديدة عند امتلاء الصف الحالي.

القيم الأساسية لـ flex-wrap:

1. nowrap (الافتراضية): جميع العناصر تبقى في صف واحد حتى لو تجاوزت الحاوية.
2. wrap: تلتف العناصر إلى صفوف جديدة عند الحاجة.
3. wrap-reverse: تلتف العناصر بترتيب معكوس (من الأسفل إلى الأعلى).

القيم الأساسية لـ flex-wrap

مثال عملي:

.container {
  display: flex;
  flex-wrap: wrap; /* السماح بالتفاف العناصر */
}

.box {
    background-color: blueviolet;
    color: #fff;
    width: 200px;
    height: 120px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

2. خاصية align-content: توزيع الصفوف

تُستخدم خاصية align-content للتحكم في توزيع الصفوف داخل الحاوية عند وجود أكثر من صف. هذه الخاصية تكون فعّالة فقط مع خاصية flex-wrap عند التفاف العناصر.

القيم الأساسية لـ align-content:

1. flex-start: تجميع الصفوف في أعلى الحاوية.
2. flex-end: تجميع الصفوف في أسفل الحاوية.
3. center: توسيط الصفوف داخل الحاوية.
4. space-between: توزيع الصفوف بحيث تكون المسافات بينها متساوية.
5. space-around: توزيع المسافات بشكل متساوٍ حول الصفوف.
6. space-evenly: توزيع الصفوف بمسافات متساوية تمامًا.

القيم الأساسية لـ align-content

مثال عملي:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* توزيع الصفوف بمسافات متساوية */
  height: 300px; /* لضمان وجود مساحة كافية للصفوف */
}

.box {
    background-color: blueviolet;
    color: #fff;
    width: 200px;
    height: 80px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

الفرق بين align-content و align-items

align-items

• تُستخدم لمحاذاة العناصر داخل الصف الواحد على المحور العمودي (المتقاطع).
• تؤثر على العناصر بشكل فردي داخل كل صف.

align-content

• تُستخدم لتوزيع الصفوف ككل داخل الحاوية.
• فعّالة فقط عندما يكون لديك عدة صفوف.

مثال للتوضيح:

أستخدام align-content مع align-items

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-items: center; /* محاذاة العناصر في منتصف المحور العمودي */
  align-content: space-around; /* توزيع الصفوف بمسافات متساوية حولها */
}

.box {
    background-color: blueviolet;
    color: #fff;
    width: 200px;
    height: 80px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

نصائح مهمة عند استخدام هذه الخصائص

1. إذا كنت بحاجة إلى توزيع العناصر أفقيًا داخل صف واحد، استخدم justify-content.
2. إذا كنت تعمل مع عدة صفوف، استخدم align-content لتوزيعها بشكل مناسب.
3. align-items هو الخيار المناسب لمحاذاة العناصر على المحور العمودي داخل صف واحد.
4. قم بتجربة القيم المختلفة لكل خاصية للحصول على التصميم الأنسب.

الخاصية المختصرة flex-flow في Flexbox

ما هي flex-flow؟

flex-flow هي خاصية مختصرة (shorthand) تُستخدم لتحديد كل من خاصيتي flex-direction و flex-wrap في سطر واحد.
بدلاً من كتابة الخاصيتين بشكل منفصل، يمكنك دمجهما معًا باستخدام flex-flow لتبسيط الكود.

الصيغة العامة:

flex-flow: <flex-direction> <flex-wrap>;

مثال عملى: الاتجاه الأفقي مع الالتفاف

.container {
  flex-flow: row wrap;
}

• row: العناصر تتبع المحور الأفقي.
• wrap: إذا لم تكن هناك مساحة كافية، تلتف العناصر إلى صف جديد.

القيم الافتراضية: إذا لم تحدد الخاصية، فإن القيم الافتراضية هي:

flex-flow: row nowrap;

لماذا نستخدم flex-flow؟

1. تبسيط الكود: بدلاً من كتابة الخاصيتين بشكل منفصل، يتم دمجهما في خاصية واحدة.
2. سهولة القراءة والصيانة: يجعل الكود أكثر وضوحًا وتنظيمًا.
3. مرونة التخصيص: يمكنك الجمع بين أي قيمة لـ flex-direction وأي قيمة لـ flex-wrap حسب احتياجات التصميم.

إعادة ترتيب العناصر باستخدام Flexbox

Flexbox يوفر أدوات متعددة تتيح لك إعادة ترتيب العناصر داخل الحاوية بطريقة ديناميكية ومرنة. في هذا القسم، سنستعرض الطرق الثلاث الأساسية التي يمكن استخدامها لإعادة ترتيب العناصر، وسنوضح كيفية تنفيذها خطوة بخطوة.

1. استخدام خاصية flex-direction مع القيم العكسية

• القيمة row-reverse: تعكس ترتيب العناصر أفقيًا، حيث يبدأ الترتيب من اليمين إلى اليسار.
• القيمة column-reverse: تعكس ترتيب العناصر رأسيًا، حيث يبدأ الترتيب من الأسفل إلى الأعلى.

مثال عملي:

.container {
    display: flex;
    flex-direction: row-reverse; /* أو column-reverse */
}

2. تعديل ترتيب العناصر في HTML مباشرةً

• الطريقة الأبسط لتغيير الترتيب هي تعديل ترتيب العناصر في الكود نفسه.
• على سبيل المثال، إذا كانت العناصر مرتبة كالتالي:

    <div class="box" id="one">Box One - 1</div>
    <div class="box" id="two">Box Two - 2</div>
    <div class="box" id="three">Box Three - 3</div>

يمكن إعادة ترتيبها ببساطة إلى:

    <div class="box" id="two">Box Two - 2</div>
    <div class="box" id="one">Box One - 1</div>
    <div class="box" id="three">Box Three - 3</div>

3. استخدام خاصية order في CSS

• خاصية order تمنحك مرونة أكبر في تحديد ترتيب العناصر بشكل مخصص.
• هذه الخاصية مخصصة فقط لعناصر Flexbox (العناصر الموجودة داخل الحاوية التي تحتوي على display: flex).

مثال عملي:

استخدام خاصية order في CSS

.container {
    display: flex;
}

#one {
    order: 3; /* العنصر الأول يظهر في الترتيب الثالث */
}

#two {
    order: 1; /* العنصر الثاني يظهر في الترتيب الأول */
}

#three {
    order: 2; /* العنصر الثالث يظهر في الترتيب الثاني */
}

خصائص التحكم في عناصر الـ Flexbox

لتحقيق مرونة أكبر في تصميم عناصر Flexbox، يمكنك استخدام خمس خصائص تؤثر على العناصر داخل الحاوية. ثلاث منها تؤثر على حجم كل عنصر على حدة. والأخرى تعطى القدرة على التحكم في محاذاة عنصر معين داخل الحاوية.

والأخيرة التى تكلمنا عنها سابقا وهى خاصية order. الخاصة بتغيير ترتيب العناصر داخل الحاوية.

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

1. خاصية align-self فى CSS

خاصية align-self في CSS تمنحك القدرة على التحكم في محاذاة عنصر معين داخل حاوية Flexbox بشكل مستقل عن العناصر الأخرى. فهي تُستخدم لتجاوز القيمة المحددة للخاصية align-items التي تؤثر على جميع العناصر داخل الحاوية.

القيم الأساسية لـ align-self:

1. auto (القيمة الافتراضية):
   يعتمد العنصر على قيمة الخاصية align-items الخاصة بالحاوية.
2. flex-start:
   يجعل العنصر يتموضع عند بداية المحور العمودي للحاوية.
3. flex-end:
   يجعل العنصر يتموضع عند نهاية المحور العمودي للحاوية.
4. center:
   يجعل العنصر يتموضع في منتصف المحور العمودي للحاوية.
5. baseline:
   يجعل العنصر يتموضع بناءً على الخط الأساسي للنص داخل الحاوية.
6. stretch:
   يجعل العنصر يتمدد ليملأ المساحة المتاحة له.

مثال:

خاصية align-self فى CSS

.container {
    display: flex;
    flex-direction: column;
    border: 2px solid #fff;
    padding: 5px;
    height: 300px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    width: 200px;
    height: 180px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#one {
    align-self: flex-start; 
}

#three {
    align-self: flex-end;   
}

2. خاصية flex-grow فى CSS

تُحدد هذه الخاصية مدى قدرة العنصر على التمدد لاحتلال مساحة إضافية متاحة داخل الحاوية.

• القيمة الافتراضية: 0 (العنصر لن يتمدد).
• القيمة الإيجابية: كلما زادت القيمة، زادت نسبة تمدد العنصر مقارنة بالعناصر الأخرى.

مثال:

خاصية flex-grow فى CSS

.container {
    display: flex;
    flex-direction: row;
    border: 2px solid #fff;
    padding: 5px;
    height: 300px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    height: 120px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#one {
    flex-grow: 1; /* تمدد بنسبة 1 */
}

#three {
    flex-grow: 2; /* تمدد بنسبة أكبر */
}

إذا وُجدت مساحة إضافية، سيتوسع three ليأخذ ضعف المساحة التي يأخذها one.

ملاحظات مهمة:

1. يجب الإنتباه عند إستخدام flex-grow مع flex-direction: row يجب عدم إستخدام width لجعل العنصر قابل للتمدد أفقياٌ.
2. يجب الإنتباه عند إستخدام flex-grow مع flex-direction: column يجب عدم إستخدام height لجعل العنصر قابل للتمدد عمودياٌ.

3. خاصية flex-shrink فى CSS

تُحدد هذه الخاصية مدى قدرة العنصر على التقلص إذا لم تكن هناك مساحة كافية في الحاوية.

• القيمة الافتراضية: 1 (العنصر يتقلص عند الحاجة).
• القيمة الصفرية: 0 تمنع العنصر من التقلص على الإطلاق.

مثال:

خاصية flex-shrink فى CSS

.container {
    display: flex;
    flex-direction: column;
    border: 2px solid #fff;
    padding: 5px;
    height: 300px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    flex-basis: 200px;
    height: 120px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#one {
    flex-shrink: 0; /* لا يتقلص */
}

#three {
    flex-shrink: 1; /* يتقلص بشكل طبيعي */
}

في حالة نقص المساحة، ستبقى one بحجمها الأصلي، بينما يتقلص two, three لملاءمة المساحة.

4. خاصية flex-basis فى CSS

تُحدد هذه الخاصية الحجم الأساسي للعنصر قبل تطبيق خصائص التمدد أو التقلص (flex-grow و flex-shrink).

• الوحدات المقبولة: يمكن استخدام القيم مثل px أو % أو auto.
• القيمة الافتراضية: auto (الحجم الأساسي يعتمد على المحتوى أو عرض العنصر).

مثال:

خاصية flex-basis فى CSS

.container {
    display: flex;
    flex-direction: row;
    border: 2px solid #fff;
    padding: 5px;
    height: 300px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    flex-basis: 200px;
    height: 120px;
    border: 2px solid orange;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#one {
  flex-basis: 100px; /* الحجم الأساسي 100px */
}

#three {
  flex-basis: 30%; /* الحجم الأساسي نسبة مئوية */
}

يتم تحديد حجم العنصر الأساسي، ثم يتم تعديله بناءً على المساحة المتاحة وقيم flex-grow وflex-shrink.

الجمع بين الخصائص الثلاث معًا: flex

لجعل الكود أكثر وضوحًا، يمكن دمج الخصائص الثلاثة (flex-grow, flex-shrink, flex-basis) في خاصية واحدة تُسمى flex.

الصيغة:

.item {
  flex: grow shrink basis;
}

مثال:

الجمع بين الخصائص الثلاث معًا: flex

#one {
  flex: 1 0 100px; /* يتمدد بمقدار 1، لا يتقلص، الحجم الأساسي 100px */
}

خلاصة

• flex-grow: للتحكم في التمدد.
• flex-shrink: للتحكم في التقلص.
• flex-basis: لتحديد الحجم الأساسي.

خاصية gap في Flexbox

ما هي gap؟

• خاصية gap تُستخدم لتحديد المسافة بين العناصر داخل الحاوية.
• تعمل مع Flexbox و Grid Layout، وتوفر طريقة مبسطة لفصل العناصر دون الحاجة إلى هوامش (margins).

القيم المتاحة لـ gap:

• gap: 10px;: تُحدد المسافة الموحدة بين العناصر.
• row-gap و column-gap: تُستخدم لتحديد المسافة بين الصفوف أو الأعمدة بشكل منفصل.

مثال عملي:

القيم المتاحة لـ gap

تطبيق المسافة بين العناصر:

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

تحديد المسافات بين المحاور بشكل منفصل:

تحديد المسافات بين المحاور بشكل منفصل

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 30px; /* المسافة بين الصفوف */
    column-gap: 10px; /* المسافة بين الأعمدة */
    border: 2px solid #fff;
}

.box {
    background-color: blueviolet;
    color: #fff;
    flex-basis: 25%;
    height: 120px;
    border: 2px solid orange;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

لماذا gap أفضل من margin؟

• مع gap، لا تحتاج إلى إضافة هوامش فردية لكل عنصر.
• تُبسط كتابة الكود وتضمن توزيعًا موحدًا للمسافات بين العناصر.
• تعمل بشكل مباشر مع الحاويات Flexbox و Grid Layout.

تطبيق متقدم باستخدام gap:

تطبيق متقدم باستخدام gap

.container {
  display: flex;
  flex-wrap: wrap; /* السماح بالتفاف العناصر */
  gap: 15px; /* مسافة موحدة بين العناصر */
  justify-content: center; /* توزيع العناصر في المنتصف */
}

ملاحظات هامة:

• خاصية gap مدعومة في معظم المتصفحات الحديثة، ولكن تأكد من التوافق إذا كنت تستهدف متصفحات قديمة.
• عند الجمع بين flex-wrap و gap، يتم تطبيق المسافات أيضًا بين العناصر الملتفة.

باستخدام flex-basis و gap، يمكن تصميم واجهات مستخدم مرنة ومرتبة بكتابة كود أكثر نظافة وفعالية.

الفرق بين flex-basis و width في Flexbox

1. خاصية flex-basis:

• تُحدد العرض الابتدائي (أو الطول في المحور الأساسي) للعناصر داخل الحاوية قبل تطبيق خصائص المرونة مثل flex-grow أو flex-shrink.
• تعمل فقط في بيئة Flexbox وتُستخدم لتحديد الحجم المثالي للعنصر في المحور الأساسي.
• القيمة الافتراضية هي auto، مما يعني أن العنصر سيأخذ حجمه بناءً على محتواه أو أي قيمة محددة مسبقًا في CSS.

2. خاصية width:

• تُحدد العرض الثابت للعنصر بغض النظر عن بيئة Flexbox.
• تعمل في أي بيئة (سواء Flexbox أو Grid أو الحاويات العادية).
• إذا كنت تستخدمها مع Flexbox، يمكن أن تتجاوزها خصائص flex-basis إذا تم تحديد كلاهما.

خصائص إضافية مهمة

1. التعامل مع النصوص الطويلة داخل العناصر

المشكلة: النصوص الطويلة قد تمتد خارج حدود العنصر.
الحل:

• استخدم الخصائص التالية للتحكم في النصوص:

مثال عملى:

التعامل مع النصوص الطويلة داخل العناصر فى Flexbox

<div class="container">
    <div class="box" id="one">Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1 Box One - 1</div>
    <div class="box" id="two">Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2 Box One - 2</div>
    <div class="box" id="three">Box Three - 3</div>
</div>

#one {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

• سترى فى الصورة أن النصوص تم ترتيبها بشكل أفضل فى العنصر الأول one بالعكس من ذلك العنصر الثانى سترى أن النصوص خرجت عن السيطرة.

2. استخدام Flexbox مع Media Queries

• يمكن تغيير خصائص Flexbox بسهولة مع Media Queries لإنشاء تصميمات متجاوبة:

مثال عملى:

استخدام Flexbox مع Media Queries

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

الأخطاء الشائعة وحلولها في Flexbox

1. العناصر لا تصطف بالشكل المطلوب

المشكلة: عند استخدام Flexbox، قد تجد العناصر لا تصطف على المحور الرئيسي أو المحور المتقاطع بالشكل المتوقع.
الحل:

• تأكد من تعيين الخاصية display: flex على الحاوية.
• استخدم justify-content لتوزيع العناصر على المحور الرئيسي.
• استخدم align-items لمحاذاة العناصر على المحور المتقاطع.

2. العناصر تتمدد بشكل غير مرغوب فيه

المشكلة: عناصر Flexbox قد تتمدد بشكل غير متوقع، مما يؤدي إلى مظهر غير متناسق.
الحل:

• قم بضبط flex-grow: 0 إذا كنت لا تريد أن تتمدد العناصر.
• استخدم flex-basis لتحديد حجم ثابت للعناصر.

3. العناصر لا تلتف عند الحاجة

المشكلة: عند وجود عناصر كثيرة في الحاوية، قد تتكدس العناصر بدلاً من الالتفاف إلى صف جديد.
الحل:

• استخدم flex-wrap: wrap لتفعيل التفاف العناصر.
• استخدم align-content لتحديد كيفية توزيع الصفوف عند الالتفاف.

4. المسافات بين العناصر غير متساوية

المشكلة: بعض العناصر قد تبدو غير متساوية في التوزيع.
الحل:

• استخدم justify-content: space-between أو justify-content: space-around لتوزيع العناصر بالتساوي.

5. التأثيرات غير المرغوب فيها من القيم الافتراضية

المشكلة: Flexbox لديه قيم افتراضية يمكن أن تؤدي إلى نتائج غير متوقعة.
الحل:

• افهم القيم الافتراضية: على سبيل المثال، flex-shrink يساوي 1 بشكل افتراضي، مما يعني أن العناصر يمكن أن تتقلص.
• قم بتعديل القيم الافتراضية حسب الحاجة (flex-shrink: 0 أو flex-grow: 1).

Flexbox في الحياة العملية

1. إنشاء رأس موقع (Header)

• تصميم رأس يحتوي على شعار، قائمة تنقل، وأزرار.

مثال عملى:

إنشاء رأس موقع Header

كود HTML

<header>
    <ul class="container">
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
        <li>Contact</li>
    </ul>
</header>

كود CSS

header {
    border: 2px solid #fff;
    padding: 10px;
    width: 70%;
}
.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

ul {
    list-style: none;
}

2. تخطيط البطاقات (Cards)

• إنشاء شبكة بسيطة من البطاقات باستخدام Flexbox:

مثال عملى:

تخطيط البطاقات Cards

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border: 2px solid #fff;
    padding: 10px;
}


.box {
    background-color: blueviolet;
    color: #fff;
    flex: 1 1 calc(33.333% - 20px);
    height: 120px;
    border: 2px solid orange;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

3. تصميم تذييل (Footer)

• توزيع المحتوى في التذييل (روابط، حقوق النشر، إلخ):

مثال عملى:

تصميم تذييل الموقع Footer

كود HTML

<footer>
    <div class="container">
    <div>
        <p>FullStackee.com</p>
        <p>
        <img
            width="100px"
            height="100px"
            src="favicon/android-chrome-192x192.png"
            alt="FullStackee Logo"
        />
        </p>
    </div>

    <div>
        <ul>
        <li>Privacy Policy</li>
        <li>Terms and Conditions</li>
        <li>About Us</li>
        <li>Contact Us</li>
        </ul>
    </div>

    <div>
        <ul>
        <li>Article Title One</li>
        <li>Article Title Two</li>
        <li>Article Title Three</li>
        <li>Article Title Four</li>
        </ul>
    </div>
    </div>

    <div class="container">
    Copyright By Mahmoud Adel @2024
    </div>
</footer>

كود CSS

footer {
    border: 2px solid #fff;
    padding: 10px;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px; /* مسافة موحدة بين العناصر */
}

ul {
    list-style: none;
}

ul li {
    margin-bottom: 5px;
}

المقارنة بين Flexbox و CSS Grid

Flexbox

• أحادي الأبعاد: يتحكم في التخطيط على محور واحد (رأسي أو أفقي).
• أفضلية الاستخدام: تخطيط المكونات داخل صف أو عمود، مثل أشرطة التنقل أو توزيع العناصر بالتساوي.

CSS Grid

• ثنائي الأبعاد: يتحكم في التخطيط على المحورين (رأسي وأفقي).
• أفضلية الاستخدام: إنشاء شبكات معقدة أو تصميم صفحات كاملة.

متى تستخدم كل منهما؟

• استخدم Flexbox لتخطيط العناصر البسيطة والمكونات الفردية.
• استخدم CSS Grid عندما تحتاج إلى تخطيط صفحات أو شبكات متعددة الأعمدة والصفوف.

دمج الاثنين معاً

• يمكن استخدام Flexbox داخل خلايا CSS Grid للحصول على مرونة أكبر:

مثال عملى:

دمج الاثنين معاً CSS Flexbox and CSS Grid

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border: 2px solid #fff;
    padding: 10px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    flex: 1 1 calc(33.333% - 20px);
    height: 120px;
    border: 2px solid orange;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

الخاتمة

والآن، بعد أن تعرفت على قوة Flexbox وكيفية استخدامه لتحقيق تصميمات جذابة ومرنة، حان الوقت لتطبيق ما تعلمته. لا تتردد في تجربة مختلف الخصائص والتلاعب بها لفهم المزيد واكتشاف إمكانياتها. Flexbox ليس مجرد أداة، بل هو حل يغير قواعد اللعبة ويجعل تصميم واجهات المستخدم أمرًا ممتعًا وسهلًا.

انطلق واستمتع بابتكار تصميمات مذهلة تسحر المستخدمين وتجعل عملك أكثر احترافية. تذكر أن الإبداع لا حدود له عندما تمتلك الأدوات المناسبة. حظًا موفقًا في مغامرتك مع Flexbox!

الأسئلة الشائعة

ما هو Flexbox في CSS ولماذا يُعتبر أداة قوية لتوزيع العناصر؟

Flexbox هو نموذج تخطيط في CSS يُستخدم لتوزيع العناصر بسهولة على المحورين الأفقي والرأسي، مما يجعله مثاليًا لتصميمات مرنة ومتناغمة.

ما الفرق بين Flexbox وتقنيات التخطيط الأخرى مثل Grid؟

Flexbox يركز على توزيع العناصر في محور واحد (أفقي أو رأسي)، بينما Grid يُستخدم لتخطيط شبكات ثنائية الأبعاد على المحورين.

كيف يمكنني جعل العناصر تتوسط الصفحة باستخدام Flexbox؟

يمكنك استخدام الخاصيتين justify-content وalign-items مع القيمة center لتوسيط العناصر بسهولة.

ما هي أهم الخصائص التي يجب تعلمها عند استخدام Flexbox؟

من أهم الخصائص: display: flex، وflex-direction، وjustify-content، وalign-items، وflex-wrap.

ما هي الأخطاء الشائعة عند استخدام Flexbox وكيف أتجنبها؟

من الأخطاء الشائعة عدم فهم العلاقة بين flex-grow، وflex-shrink، وflex-basis. لتجنبها، يُنصح بفهم كيفية تأثير كل خاصية على توزيع العناصر.

تعديل المقال