recent
أخبار ساخنة

ترتيب كل العناصر بإستخدام flexbox في لغة CSS الدرس |12|

الصفحة الرئيسية


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

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


flexbox-parent

يتوفر في المدير parent خواص عديدة سوف نتحدث عنها جميعها بالتفصيل


الخاصية display

عبار عن خاصية Property داخل Css Style Sheet تُحدد شكل العنصر Element على Layout و يمكن أن تأخذ قيمة او Value Al flex.

Display Flex


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


flex-direction

 

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


flex-wrap


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


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


flex-flow


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


justify-content

 

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


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


align-items


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

1-الـ flex-start : يمكن بدء جميع Box من الأعلى.
2-الـ flex-end : يمكن بدء جميع Box من الأسفل.
3-الـ center : يمكنك توسيط جميع Box مع بعضهم.
4-الـ stretch : يمكنك تمديد طول Box مع بعضهم مهما كان حجم Content كل Box بهم, هذا الوضع الإفتراضي.
5-الـ baseline : توسيط جميع Content مع بعضهم.

 

align-content


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


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

 

flexbox child

مثلما تتوفر عدة خصائص في المدير يتوفر عدة خصائص في الموظف child ايضاً.

 

order

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

.child {
order: 5;
}


flex-grow

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

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

 

flex-basis

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

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

 

flex-shrink

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

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

 

flex

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

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

 

تابع درس flex-box علي اليوتيوب من الفيديو الآتي

google-playkhamsatmostaqltradent