تطبيق وصل wassll لمتابعة مخصصات المحروقات

ترتيب العناصر بإستخدام flexbox في CSS

يختلف الـ flexbox عن غيره في ترتيب العناصر element's على Layout حيث يُعرَف بسهولة الإستخدام لكن flexbox لها قيم Values كثيرة يأخذها كل من المدير او الموظف, نقصد هنا أن هناك بعض الخصائص Property يأخذها كل من Parent و هناك Property يأخذها كل من Child, الـ flex-box لها كثير من Property, و هذا الجزء الأصعب في تعلم flexbox لكن يُسِّهل علينا تقسيم العناصر Element في Layout, لنتعرَّف على ماهو flex وكيف يستخدم.

CSS flexbox parent

في CSS، يعتبر Flexbox نموذجًا لتصميم عناصر الواجهة الخاصة بالصفحات الإلكترونية، حيث يُمكِّن Flexbox من توزيع عناصر الواجهة بطريقة مرنة وسهلة، سواءً في اتجاه الصف أو العمود. وبشكل عام، يتم تطبيق Flexbox على العنصر الأب (parent) الذي يحتوي على مجموعة من العناصر الأخرى المراد توزيعها.

الخاصية display ترتيب العناصر بإستخدام flexbox في CSS 10

لإستخدام Flexbox، يتم تحديد عنصر الأب باستخدام خاصية display وتعيين قيمتها إلى flex، مثل هذا:

.parent {
  display: flex;
}

هنا نقوم بإعطاء Display Flex إلى المدير أو Parent على جميع الصندوق Box كما يمكننا تحديد إتجاه Al Box إذا كنا نريد من اليمين إلى اليسار Right To Left او من اليسار إلى اليمين Left To Right او من الأعلي إلى الأسفل Top To Bottom او من الأسفل إلى الأعلى Botton To Top, يُمكننا تحديد كل هذا من خلال flex-direction.

بمجرد تحديد Flexbox على العنصر الأب، يصبح بإمكان المُصمِّم تحديد كيفية توزيع العناصر الداخلة فيه، وذلك باستخدام خصائص مثل justify-content و align-items و flex-direction وغيرها من الخصائص.

justify-content: تستخدم هذه الخاصية لتحديد كيفية توزيع العناصر في اتجاه الصف (horizontal)، وتتضمن القيم التالية:

1. flex-start: توزيع العناصر من البداية (أي من الجهة اليسارية للعنصر الأب).
2. flex-end: توزيع العناصر من النهاية (أي من الجهة اليمنى للعنصر الأب).
3. center: توزيع العناصر في وسط العنصر الأب.
4. space-between: توزيع العناصر بمسافات متساوية بينها.
5. space-around: توزيع العناصر بمسافات متساوية حولها.

align-items: تستخدم هذه الخاصية لتحديد كيفية توزيع العناصر في اتجاه العمود (vertical)، وتتضمن القيم التالية:

1. flex-start: توزيع العناصر من البداية (أي من الجهة العلوية للعنصر الأب).
2. flex-end: توزيع العناصر من النهاية (أي من الجهة السفلية للعنصر الأب).
3. center: توزيع العناصر في وسط العنصر الأب.
4. stretch: تمدد العناصر لتصل إلى طول العنصر الأب.

flex-direction: تستخدم هذه الخاصية لتحديد الاتجاه الذي يتبعه Flexbox في توزيع العناصر، وتتضمن القيم التالية:

1. row: الاتجاه الأفقي (من اليسار إلى اليمين).
2. row-reverse: الاتجاه الأفقي المعكوس (من اليمين إلى اليسار).
3. column: الاتجاه العمودي (من الأعلى إلى الأسفل).
4. column-reverse: الاتجاه العمودي المعكوس (من الأسفل إلى الأعلى).

وهناك خصائص أخرى يمكن استخدامها في Flexbox مثل flex-wrap و align-content و order و flex-grow و flex-shrink و flex-basis، والتي تمكن المصممين من تعديل توزيع العناصر بشكل أكثر تفصيلًا وتحكمًا سوف نتحدث عن جميع الخصائص بالتفصيل.

CSS flex-direction ترتيب العناصر بإستخدام flexbox في CSS 10

خاصية flex-direction هي إحدى خصائص CSS التي تستخدم في Flexbox، وتُستخدم لتحديد الاتجاه الذي يتبعه Flexbox في توزيع العناصر داخل العنصر الأب (parent).

تتضمن قيم هذه الخاصية الاتجاهات التالية:

• row: الاتجاه الأفقي (من اليسار إلى اليمين). وهي القيمة الافتراضية لهذه الخاصية.
• row-reverse: الاتجاه الأفقي المعكوس (من اليمين إلى اليسار).
• column: الاتجاه العمودي (من الأعلى إلى الأسفل).
• column-reverse: الاتجاه العمودي المعكوس (من الأسفل إلى الأعلى).

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل flex-direction: row;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  flex-direction: row | row-reverse | column | column-reverse ;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة flex-direction إلى row-reverse، مما يعني أن العناصر ستُوضع في الاتجاه الأفقي بحيث يبدأ التوزيع من الجهة اليمنى للعنصر الأب وينتهي بالجهة اليسرى. يمكن استخدام القيم الأخرى لتحديد الاتجاه الذي يتبعه Flexbox في توزيع العناصر بالطريقة المطلوبة.

يكون الوضع الإفتراضي إلى flex-direction هو row إن لم تقوم بتغيير و عكس row هي row-reverse وعكس column هي column-reverse.

////////////////

CSS flex-wrap ترتيب العناصر بإستخدام flexbox في CSS 10

خاصية flex-wrap هي إحدى خصائص CSS التي تستخدم في Flexbox، وتُستخدم لتحديد ما إذا كانت العناصر داخل العنصر الأب (parent) ستظل على نفس السطر أم ستنتقل إلى السطر التالي في حالة عدم وجود مساحة كافية لوضعها في نفس السطر.

تتضمن قيم هذه الخاصية الخيارات التالية:

1. nowrap: تُحافظ على العناصر على نفس السطر دون أي انتقال إلى السطر التالي.
2. wrap: تسمح بانتقال العناصر إلى السطر التالي عندما لا يكون هناك مساحة كافية على نفس السطر.
3. wrap-reverse: تسمح بانتقال العناصر إلى السطر السابق عندما لا يكون هناك مساحة كافية على نفس السطر.

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل flex-wrap: wrap;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  display: flex;
  flex-wrap: wrap;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة flex-wrap إلى wrap، مما يعني أن العناصر ستنتقل إلى السطر التالي عندما لا يكون هناك مساحة كافية لوضعها في نفس السطر. يمكن استخدام القيم الأخرى لتحديد كيفية تعامل Flexbox مع العناصر عندما لا يكون هناك مساحة كافية لوضعها في نفس السطر.

خاصية flex-wrap هي إحدى خصائص CSS التي تستخدم في Flexbox، وتُستخدم لتحديد ما إذا كانت العناصر داخل العنصر الأب (parent) يجب أن تظل في نفس الصف الموجود به، أو أن تنتقل إلى الصف التالي عندما تتجاوز عرض العنصر الأب.

تتضمن قيم هذه الخاصية الخيارات التالية:

• nowrap: يتم استخدام هذه القيمة الافتراضية للخاصية، والتي تعني عدم السماح للعناصر بالانتقال إلى الصف التالي عندما تتجاوز عرض العنصر الأب.
• wrap: تسمح هذه القيمة للعناصر بالانتقال إلى الصف التالي عندما تتجاوز عرض العنصر الأب.
• wrap-reverse: تسمح هذه القيمة للعناصر بالانتقال إلى الصف التالي عندما تتجاوز عرض العنصر الأب، ولكن يتم تغيير اتجاه الصف، حيث يبدأ الصف الجديد من الجهة المعاكسة للصف الأول.

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل flex-wrap: wrap;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  display: flex;
  flex-wrap: wrap;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة flex-wrap إلى wrap، مما يعني أنه إذا تجاوز عرض العنصر الأب، فستنتقل العناصر إلى الصف التالي. يمكن استخدام القيم الأخرى لتحديد سلوك Flexbox في حال تجاوز عرض العنصر الأب.

.parent {
  flex-wrap: nowrap | warp | warp-reverse ;
}

كما يَعرِف الجميع أنه إذا كان هناك 5 box و كل box يأخذ 25% من width و معنى ذلك أن هكذا تم كسر نسبة 100% لأن اصبح جميع box له قيمة 125% من width و هكذا يحدٌث scroll من العرض و هذا شيئ غلط لكن من خلال flex-wrap يمكننا القول لها إذا كسر عرض box نسبة 100% إنزل في الوضع الإفتراضي و هو Top And Left.

//////

و لها مجموعة من القيم مثل wrap إنزل إلى الأسفل, و nowrap لا تنزل إلى الأسفل و هذا الوضع الإفتراضي wrap-reverse إنزل إلى الأسفل من اليمين Right To Left.

CSS flex-flow ترتيب العناصر بإستخدام flexbox في CSS 10

خاصية flex-flow هي خاصية مجمعة (shorthand) في CSS يمكن استخدامها لتحديد قيمتي خاصيتي flex-direction و flex-wrap في نفس الوقت.

تتكون قيمتها من قيمتي flex-direction و flex-wrap، وبالتالي يمكن استخدامها بدلاً من كتابة القيمتين بشكل منفصل. ويمكن استخدام المسافات أو علامة الفاصلة لفصل القيم.

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل flex-flow: row wrap;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  display: flex;
  flex-flow: row wrap;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة flex-flow إلى row wrap، مما يعني أن العناصر ستُوضع في الاتجاه الأفقي من اليسار إلى اليمين، وإذا تجاوز عرض العنصر الأب، فستنتقل العناصر إلى الصف التالي. يمكن استخدام القيم الأخرى لتحديد الاتجاه الذي يتبعه Flexbox في توزيع العناصر وكيفية تعامل Flexbox مع العناصر عندما تتجاوز عرض العنصر الأب.

.parent {
  flex-flow: column wrap;
}

هي عباره عن إختصار بين flex-wrap And flex-direction معاً حيث يمكنك تحديد الإتجاه المرن و اللف المرن معاً و القيمة الإفتراضية هي column wrap يمكنها أن تكون column nowrap او row wrap.

CSS justify-content ترتيب العناصر بإستخدام flexbox في CSS

خاصية justify-content هي إحدى خصائص CSS التي تستخدم في Flexbox، وتُستخدم لتحديد كيفية توزيع العناصر داخل العنصر الأب (parent) في الاتجاه الرئيسي (main axis).

تتضمن قيم هذه الخاصية الخيارات التالية:

• flex-start: يتم توزيع العناصر بحيث يبدأ التوزيع من الجهة الخاصة بالبداية (من اليسار أو الأعلى حسب الاتجاه).
• flex-end: يتم توزيع العناصر بحيث ينتهي التوزيع في الجهة الخاصة بالنهاية (في الجهة اليمنى أو السفلى حسب الاتجاه).
• center: يتم توزيع العناصر بحيث تكون مركز العناصر في الوسط.
• space-between: يتم توزيع العناصر بحيث تكون المسافة بين كل عنصرين متساوية وتكون أقصى مسافة بين العنصر الأول والآخر في نفس الجهة الخاصة بالبداية أو النهاية.
• space-around: يتم توزيع العناصر بحيث تكون المسافة حول كل عنصر متساوية، وتكون المسافة بين العنصر الأول والآخر أصغر قليلاً.
• space-evenly: يتم توزيع العناصر بالتساوي بحيث تكون المسافة بين كل عنصر متساوية، بما في ذلك المسافة الأولى والأخيرة.

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل justify-content: center;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  justify-content: center;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة justify-content إلى center، مما يعني أن العناصر ستُوضع في الوسط. يمكن استخدام القيم الأخرى لتحديد كيفية توزيع العناصر في الاتجاه الرئيسي وتحقيق التصميم المطلوب في صفحة الويب.

.parent {
  justify-content: flex-start | flex-end | center | space-betwen | space-around | space-evenly;
  start | end | left | right ... + safe| unsafe ;
}

الجزء الأهم او المتبع لدى الجميع هو ترتيب العناصر element مع بعض الهوامش من يسار و يمين box.

///////////////

من الصورة السابقة لقد فهمنا كيف نقوم بإعطاء justify-content القيمة بحسب الرغبة في إخراج شكل box, و الوضع الإفتراضي لها flex-start.

CSS align-items ترتيب العناصر بإستخدام flexbox في CSS

خاصية align-items هي إحدى خصائص CSS التي تستخدم في Flexbox، وتُستخدم لتحديد توزيع العناصر داخل العنصر الأب (parent) في الاتجاه الثانوي (cross axis).

تتضمن قيم هذه الخاصية الخيارات التالية:

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

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل align-items: center;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  display: flex;
  align-items: center;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة align-items إلى center، مما يعني أن العناصر ستوضع في وسط الاتجاه الثانوي. يمكن استخدام القيم الأخرى لتحديد كيفية توزيع العناصر في الاتجاه الثانوي وتحقيق التصميم المطلوب في صفحة الويب.

.parent {
  align-items: stretch | flex-start | flex-end | center | baseline ;
}

يمكنك من خلال تلك الخصائص property تحديد شكل box و كيف تريد أن يظهَر box على Layout و تتحكم اكثر في content الذي داخل box حيث يختلف كل box منهم في حجم content و هنا دور align-items يمكنك أن تلعب في content الذي داخل كل box حيث يمكن أن يكون content في اسفل box او في اعلى box.

///////////////

CSS align-content flexbox ترتيب العناصر بإستخدام flexbox في CSS

خاصية align-content هي إحدى خصائص CSS التي تستخدم في Flexbox، وتُستخدم لتحديد توزيع الصفوف داخل العنصر الأب (parent) في الاتجاه الثانوي (cross axis) عند وجود عدة صفوف في العنصر الأب.

تتضمن قيم هذه الخاصية الخيارات التالية:

1. flex-start: تُوضع الصفوف في الجهة الخاصة بالبداية (في الجهة العلوية أو اليسرى حسب الاتجاه).
2. flex-end: تُوضع الصفوف في الجهة الخاصة بالنهاية (في الجهة السفلية أو اليمنى حسب الاتجاه).
3. center: تُوضع الصفوف في الوسط.
4. space-between: تُوزع الصفوف بحيث تكون المسافة بين كل صفين متساوية، وتكون أقصى مسافة بين الصف الأول والآخر في نفس الجهة الخاصة بالبداية أو النهاية.
5. space-around: تُوزع الصفوف بحيث تكون المسافة حول كل صف متساوية، وتكون المسافة بين الصف الأول والآخر أصغر قليلاً.
6. stretch: تمد الصفوف لتملأ المساحة الكاملة في الاتجاه الثانوي.

يتم تحديد قيمة هذه الخاصية باستخدام محددات CSS مثل align-content: center;، ويمكن تطبيقها على عنصر الأب (parent) كما يلي:

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

في الأمثلة أعلاه، يتم تطبيق Flexbox على العنصر الأب (parent)، وتم تحديد قيمة align-content إلى center، مما يعني أن الصفوف ستوضع في وسط الاتجاه الثانوي. يمكن استخدام القيم الأخرى لتحديد كيفية توزيع الصفوف في الاتجاه الثانوي وتحقيق التصميم المطلوب في صفحة الويب.

.parent {
  align-content: flex-start | flex-end | center | space-betwen | space-around | space-evenly;
  stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

يمكنك من خلال تلك Property التحكم في جميع Box Child و كيف تُريد أن يظهَر في Parent يمكن أن يكون من اعلى Parent او من الأسفل او يكون بينهم Margin من الأعلي و الأسفل, صوره توضيح.

///////////////////

و هنا نكون إنتهينا من Property التي يأخذها المدير او Parent نأتي الآن إلى Property التي يأخذها Child.

CSS flexbox child

عناصر Flexbox (Flex items) هي العناصر الفرعية داخل عنصر Flexbox الرئيسي (Flex container) والتي تمتد في اتجاه العرض أو الارتفاع وفقًا لتوزيع Flexbox المحدد.

يمكن تحديد الخصائص المختلفة لعناصر Flexbox باستخدام العديد من الخصائص المختلفة، مثل:

1. order: تحديد ترتيب عنصر Flexbox داخل Flex container.
2. flex-basis: تحديد العرض (width) أو الارتفاع (height) الأولي لعنصر Flexbox.
3. flex-grow: تحديد قدرة عنصر Flexbox على التمدد في اتجاه العرض أو الارتفاع.
4. flex-shrink: تحديد قدرة عنصر Flexbox على الانكماش في اتجاه العرض أو الارتفاع.
5. flex: تحديد العرض (width) أو الارتفاع (height) وقدرة العنصر على التمدد والانكماش في اتجاه العرض أو الارتفاع.
6. align-self: تحديد توزيع عنصر Flexbox في اتجاه الارتفاع داخل Flex container.

يمكن تحديد الخصائص المختلفة لعناصر Flexbox باستخدام محددات CSS في عنصر الطفل (child element) كما يلي:

.child {
  order: 1;
  flex-basis: 25%;
  flex-grow: 1;
  flex-shrink: 1;
  flex: 1 0 25%;
  align-self: center;
}

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

CSS order flexbox child

يمكنك التحكم في box من خلال تلك Property نفترض أنه يوجد لدينا مجموعة من box 5 كمثال و سيكون لدينا box هي 1-2-3-4-5, الطبيعي أنها سيكون box رقم 5 هو آخر box لكن يُمكن أن يكون الأول, نجلب box 5 ثم نعطيه order:1 و هكذا يكون box 5 هو الأول و ليس الأخير.

.child {
  order: 5;
}

CSS flex-grow flexbox child

يمكنك تحديد مساحه box إذا كان هناك مساحة فارغة نفترض أنه لدينا 4 box و كل box يأخذ مساحة 1 و هنا يكون جميع box المساحة 1 لكن من خلال تلك property يمكن أن نقوم بإعطاء box رقم 3 مساحة إضافية flex-grow 2 إن كان هناك مساحة متبقية في الأساس.

.child {
  flex-grow: 2; /* default 0 */
}

CSS flex-basis flexbox child

يمكنك من خلال تلك property تحديد width كل box بديل إلى property width الوصع الافتراضي هو auto.

.child {
  flex-basis:  | auto; /* default auto */
}

CSS flex-shrink flexbox child

تقوم تلك الخصائص property بتقليص حجم box إذا لزم الأمر يعني إن كان هناك 5 box و كل box يأخذ flex-basis 25% معنى ذلك أنه كسر حجم width 100% هنا يعمل بوضع إفتراضي flex-shrink و تقوم بتقليص جميع box بالتساوي لحين الحصول على width 100% و هذا يحدُث إذا كنت تريد flex-wrap nowrap.

.child {
  flex-shrink: 3; /* default 1 */
}

CSS flex flexbox child

هي عباره عن إختصار short hand إلى flex-grow و flex-shrink و flex-basis.

.child {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

لمشاهدة هذا الدرس على يوتيوب بشكل عملي اضغط هنا.