كل ما تريد معرفته حول نموذج الصندوق المرن Flexbox في CSS
سأعرّفك في مقال اليوم على نموذج الصندوق المرن Flexbox في لغة CSS الذي سيساعدك بشكل كبير في توزيع عناصر صفحة الويب ووضعها في اتجاه محدد أفقي أو عمودي والتحكم في المسافات بين هذه العناصر بمرونة كبيرة.
فلغة CSS تطورت بشكل لافت ودخلت إليها مفاهيم متقدمة كثيرة شرحت معظمها في مقالات سابقة ومن بينها مفهوم filters والانتقالات transitions والتحويلات transforms ولعل أكثر هذه الميزات أهميةً كان تخطيط الفليكس الذي كان له دور هام جدًا في تصميم صفحات الويب المتجاوبة بسهولة كبيرة.
ما هو Flexbox؟
هو نموذج فعال لتخطيط ومحاذاة عناصر صفحة الويب، وتوزيع المساحة بين هذه العناصر داخلها، حتى عندما يكون إطار العرض وحجم العناصر الخاصة بك ديناميكيًا أو غير محدد.
كيف أستخدم Flexbox؟
تحتاج لعدة أمور للتعامل مع نموذج فليكس بوكس في CSS وهي كالتالي:
- الخاصية display: flex للحاوية
- الاتجاه المرن Flex-direction
- الالتفاف المرن Flex-wrap
- التدفق المرن Flex-flow
- محاذاة المحتوى على الجانبين Justify-content
- محاذاة العناصر Align-items
- محاذاة المحتوى Align-content
- التمدد المرن Flex-grow والانكماش المرن Flex-shrink
- الأساس المرن Flex-base
- اختصار الضبط المرن Flex shorthand
- المحاذاة الذاتية Align-self
دعني أوضح لك كل خاصية من هذه الخصائص وطريقة استخدامها بأمثلة توضيحية.
الخاصية display: flex للحاوية
عليك بدايةً أن تعرّف حاوية مرنة على سبيل المثال في حال كنت تريد إنشاء قائمة من العناصر في لغة HTML عليك كتابة الكود التالي:
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
عرفنا هنا قائمة غير المرتبة ul تضم عناصر القائمة الفرعية li، فكما عرف تعد ul هي العنصر الأصل أو الحاوي و li العنصر الفرعي في هذه القائمة.
لاستخدام نموذج Flexbox، يجب أن تجعل العنصر الأصل عبارة عن حاوية مرنة flexible container عن طريق ضبط قيمة الخاصية display لها لتكون كما يلي:
display: flex;
or
display:inline-flex
هذا كل ما تحتاجه حاليًا للبدء باستخدام الصندوق المرون وبإضافة بعض التنسيقات للكود كما يلي:
ul
{
display: flex;
}
li
{ list-style: none;
width: 100px;
height: 100px;
background-color: #BF40BF;
margin: 8px;}
ستحصل على النتيجة التالية:
بمجرد تعيين الخاصية display للحاوية الأساسية بالقيمة flex تصبح القائمة غير المرتبة تلقائيًا حاوية مرنة وتصبح العناصر التابعة لهذه الحاوية عناصر مرنة.
الاتجاه المرن Flex-direction
بعد تعيين عنصر رئيسي كحاوية مرنة عليك الآن توفير بعض خصائص المحاذاة لاستخدامها في هذه الحاوية المرنة. قد يوحي اسم هذه الخاصية أنها تحدد كيفية وضع العناصر المرنة إما أفقيًا أو عموديًا أو في كلا الاتجاهين.
لكن في الواقع الاتجاهان الأفقي والعمودي لا يطلق عليهما الاتجاهات في النموذج المرن وإنما يكون لديك محور رئيسي أفقي يتجه من اليسار إلى اليمين بشكل افتراضي row أو من اليمين لليسار row-reverse ومحور عمودي يتجه من الأعلى إلى الأسفل بشكل افتراضي column أو من الأعلى للأسفل column-reverse، وبالتالي يمكنك أن تحدد طريقة ترتيب العناصر في الحاوية المرنة عبر القيم التالية للخاصية.
ul
{ flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;
}
الالتفاف المرن Flex-wrap
في حال قمت بإضافة المزيد من عناصر القائمة في القائمة غير المرتبة التي أنشأتها في بداية المقال ماذا سيحصل في هذه الحالة؟ هل يتغير حجم الحاوية المرنة لاستيعاب المزيد من العناصر ياترى، أم ستنتقل عناصر القائمة الجديدة إلى سطر آخر؟
الجواب هو أن الحاوية المرنة بشكل افتراضي سوف تتكيف وتلائم العناصر المرنة الجديدة، ومهما أضفت من عناصر جديدة ستستمر الحاوية المرنة في استيعاب المزيد من العناصر في سطر واحد حتى إذا كان المتصفح يحتاج إلى التمرير أفقيًا.
السبب في ذلك هو أن خاصية flex-wrap لها القيمة nowrap بشكل افتراضي وهذا يؤدي إلى عدم التفاف عناصر الحاوية المرنة وبقاء العناصر على سطر واحد مهما زاد عددها كما في الصورة التالية.
لكن يمكن أن تغير هذا السلوك الافتراضي إذ يمكن أن تأخذ خاصية flex-wrap أي من القيم الثلاث التالية:
ul { flex-wrap: wrap || nowrap || wrap-reverse; }
وبالتالي في حال كنت تريد التفاف العناصر المرنة داخل الحاوية المرنة أي عندما لا تتمكن المساحة المتاحة داخل الحاوية المرنة من استيعاب العناصر المرنة في عرضها الافتراضي فقم في هذه الحالة بتقسيمها إلى أسطر متعددة حسب الحاجة.
في هذه الحالة مرر القيمة wrap للخاصية flex-wrap كما يلي:
ul {flex-wrap: wrap;}
في هذه الحالة عندما يتعذر على سطر واحد احتواء جميع عناصر القائمة بعرضها الافتراضي فإنها تنقسم إلى عدة أسطر حتى عند تغيير حجم المتصفح وهنا سوف تظهر العناصر المرنة بعرضها الافتراضي وليس هناك حاجة لفرض احتواء العديد من العناصر المرنة في سطر واحد.
أما في حال أعطيتها القيمة wrap-reverse ففي هذه الحالة ستسمح للعناصر المرنة بالانفصال إلى أسطر متعددة ولكن في الاتجاه المعاكس كما في الصورة التالية
التدفق المرن Flex-flow
التدفق المرن هو خاصية مختصرة تأخذ قيم flex-direction و flex-wrap values.
ul {
flex-flow: row wrap; }
ستكون النتائج في هذه الحالة مشابهة لقيم flex-direction و flex-wrap
محاذاة المحتوى على الجانبين Justify-content
تحدد الخاصية justify-content كيفية قيام المتصفح بتوزيع المساحة بين عناصر المحتوى وحولها على طول المحور الرئيسي للحاوية المرنة والمحور السطري لحاوية الشبكة، وهي تأخذ أحد القيم الخمسة التالية:
ul {
justify-content: flex-start;
justify-content:flex-end;
justify-content:center ;
justify-content: space-between;
justify-content:space-around;
}
القيمة flex-start: تضع العناصر عند بداية المحور الرئيسي للعنصر الذي يحتوي عليه ul.
القيمة flex-end:تضع العناصر عند نهاية المحور الرئيسي.
القيمة center: تضع العناصر في الوسط على طول المحور الرئيسي.
القيمة space-between: توزع العناصر بالتساوي على طول المحور الرئيسي، مع ترك مسافة فارغة بين كل زوج من العناصر المتجاورة.
القيمة space-around: توزع العناصر بالتساوي على طول المحور الرئيسي مع ترك مسافة فارغة حول كل عنصر.
على سبيل المثال في حال كان لديك القائمة التالية:
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
يمكن باستخدام خاصية justify-content محاذاة العناصر المرنة الثلاثة عبر المحور الرئيسي بأي طريقة تريدها.
flex-start: هي القيمة الافتراضية وهي تقوم بتجميع العناصر المرنة في بداية المحور الرئيسي.
ul {justify-content: flex-start; }
flex-end: تقوم بتجميع العناصر المرنة في نهاية المحور الرئيسي.
ul {justify-content: flex-end; }
center: تقوم بتوسيط العناصر المرنة على طول المحور الرئيسي.
ul {justify-content: center; }
space-around: تحافظ على نفس المسافة بين كل عنصر مرن.
ul {justify-content: space-around; }
space-between: تحافظ على نفس التباعد بين كل عنصر مرن.
ul {justify-content: space-between; }
وإليك صورة أخرى توضح كيفية تباعد مجموعة من الأزار بناء على قيم مختلفة للخاصية justify-content:
محاذاة العناصر Align-items
تتشابه خاصية align-items مع خاصية justify-content لكنها تحدد كيفية وضع العناصر المرنة على المحور العمودي وليس الأفقي وهذا هو الفرق بين خاصية align-items و justify-content.
يمكن ضبط محاذاة العناصر على أي من هذه القيم:
ul {
align-items: flex-start;
align-items: flex-end;
align-items: center ;
align-items: stretch ;
align-items: baseline;
}
لا تنسَ الاتجاه الذي يتأثر بهذه الخصائص وهو المحور العمودي كما أن القيمة الافتراضية هي stretch وهي تؤدي هذا إلى مطّ العناصر المرنة بحيث تملأ الارتفاع الكامل للحاوية المرنة ولتغيير هذا السلوك يمكنك تحديد الخاصية بأحد القيم الأخرى التي تقوم بما يلي:
- flex-start: تقوم بتجميع العناصر المرنة في بداية المحور.
- flex-end: تقوم بتجميع العناصر المرنة في نهاية المحور .
- center: تقوم بمحاذاة العناصر المرنة في مركز الحاوية المرنة.
- baseline: تقوم بمحاذاة جميع العناصر المرنة بحيث يكون المحتوى الخاص بها على خط محوري.
محاذاة المحتوى Align-content
في حال كان لدينا حاوية مرنة متعددة الخطوط نستخدم هذه الخاصية لمحاذاة المحتوى في حاويات مرنة متعددة الأسطر وتتحكم في كيفية محاذاة العناصر المرنة في حاوية مرنة متعددة الخطوط والقيمة الافتراضية هي أيضًا stretch حيث يتم شدّ أو مطّ العناصر المرنة لتلائم المساحة المتاحة على طول المحور العمودي والتباعد الذي قد يوجد بين العناصر المرنة أدناه يرجع إلى الهامش المحدد على العناصر.
- flex-start: تقوم بمحاذاة العناصر الموجودة في الحاوية متعددة الأسطر إلى بداية المحور الأفقي ومحاذاة العناصر المرنة إلى الجزء العلوي من الحاوية المرنة حيث أن المحور الافتراضي يكون من أعلى إلى أسفل.
- flex-end: تقوم بمحاذاة العناصر المرنة بنهاية المحور الأفقي.
- center: تقوم بمحاذاة العناصر المرنة إلى مركز المحور العمودي.
أنت الآن تفهم كيفية استخدام خصائص الحاوية المرنة المتنوعة وخصائص العناصر نفسها وهي كالتالي:
Order || Flex-grow || Flex-shrink || Flex-basis
كما تتوفر أيضًا خصائص محاذاة لجميع العناصر المرنة أيضًا وهي:
order: تسمح بإعادة ترتيب العناصر المرنة داخل الحاوية. يمكنك نقل عنصر مرن من موضع إلى آخر. تمامًا كما تفعل مع القوائم القابلة للفرز ويتم ذلك دون التأثير على الكود المصدري مما يعني أن موضع العناصر المرنة في شيفرة مصدر HTML لم يتغير والقيمة الافتراضية لخاصية هي 0. كما يمكن أن تأخذ قيمًا سالبة أو موجبة.
من الجدير بالذكر أن العناصر المرنة يعاد ترتيبها بناءً على القيم الرقمية للخاصية order من الأدنى إلى الأعلى.
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
تحتوي جميع العناصر المرنة على قيمة order تساوي 0 بشكل افتراضي وتعرض عناصر Flex تمامًا كما هو محدد في ترتيب كود HTML. لكن ماذا لو أردت لسبب ما ظهور العنصر 1 أخيرًا بدون تغيير ترتيب المصدر في مستند HTML؟
كل ما عليك فعله هو جعل قيمة order للعنصر 1 أعلى من قيمة عناصر القائمة الأخرى كي يتم إعادة ترتيب العناصر المرنة من الأدنى إلى الأعلى.. وفي حال سبق لك استخدام خاصية z-index على عناصر الكتلة فستكون على دراية بهذا النوع من الأشياء.
li:nth-child(1)
{
order: 1;
}
لا تنسَ أنه افتراضيًا، تحتوي عناصر القائمة 2 و 3 و 4 جميعها على قيمة ترتيب 0.
Flex-grow و Flex-shrink
تتحكم خصائص الزيادة المرنة والتقلص المرن في المقدار الذي يجب أن يمتد فيه العنصر المرن إذا كانت هناك مسافات إضافية، أو يتقلص إذا لم تكن هناك مسافات إضافية. قد تأخذ أي قيم تتراوح من 0 إلى أي رقم موجب. 0 || رقم موجب، عدد إيجابي
لأوضح ذلك بمثال عملي، ضع في اعتبارك القائمة البسيطة غير المرتبة أدناه. وهي تتألف من عنصر قائمة واحد فقط.
<ul>
<li> أنا قائمة بسيطة </ li>
</ul>
ul {display: flex;}
بشكل افتراضي، يتم تعيين خاصية الزيادة المرنة إلى 0 أي بشكل ضمني لا يكبر العنصر المرن ليلائم المساحة المتاحة بالكامل فالقيمة 0 تشبه مفتاح إيقاف التشغيل وهنا تم إيقاف تشغيل مفتاح النمو المرن.
ومع ذلك، إذا قمت بتغيير قيمة الزيادة المرنة فسوف يكبر العنصر المرن لملء المساحة المتاحة لأن المفتاح قيد التشغيل وإذا حاولت تغيير حجم المستعرض الخاص بك، فإن العنصر المرن يتقلص أيضًا ليلائم عرض الشاشة الجديد.
لماذا ا؟ لأنه وبشكل افتراضي تعيين خاصية الانكماش على 1 مما يعني أن مفتاح Flex-shrink قيد التشغيل أيضًا.
الأساس المرن Flex-base
تحدد خاصية الأساس المرن الحجم الأولي للعنصر المرن. قبل أن تقوم خصائص Flex-Grow أو flex-shrink بضبط حجمها لتناسب الحاوية أم لا. وتكون القيمة الافتراضية هي Flex-base: auto. كما يمكن أن تأخذ Flex-base أي قيم تستخدمها في خاصية العرض العادية.
- percentages
- ems
- rems |
- pixels
- etc
لاحظ أنه عند محاولة تعيين خاصية Flex-base إلى قيمة مستندة إلى الصف، استخدم الوحدة أيضًا واستخدم display: flex:
<ul> <li>I am a simple list</li></ul>
ul { display: flex}
li { padding: 4px; /*some breathing space*/}
يتأثر العرض الأولي للعنصر المرن بشكل افتراضي بالقيمة الافتراضية Flex-base: auto.
يتم حساب عرض العنصر المرن تلقائيًا بناءً على حجم المحتوى وحجم المساحة المتروكة التي تحددها أيضًا وهذا يعني أنه إذا قمت بزيادة المحتوى في العنصر المرن فسيتم تغيير حجمه تلقائيًا ليلائم المساحة.
أما العرض فيتم حسابه تلقائيًا ومع ذلك، إذا كنت تريد ضبط العنصر المرن على عرض ثابت فيمكنك أيضًا القيام بذلك بكتابة الكود البرمجي كما يلي:
li { flex-basis: 150px;}
اختصار الضبط المرن Flex shorthand
يمكنك ضبط النمو المرن والتقلص المرن بشكل مختصر كما يلي:
li { flex: 0 1 auto;}
يساوي الكود أعلاه ضبط الخصائص الثلاثة التالية:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto
إليك بعض قيم الاختصارات المرنة المفيدة التي قد تحتاج لاستعمالها:
li { flex: 1 1;}
li { flex-basis: 200px;}
li { flex: 0 0 auto;}
المحاذاة الذاتية Align-self
تمنحك الخاصية align-self مرونة كبيرة وتمكنك من التحكم في العناصر المرنة. فكما رأيت تساعدك خاصية align-items في محاذاة جميع العناصر المرنة بشكل جماعي داخل حاوية مرنة لكن ماذا لو أردت تغيير موضع عنصر مرن واحد على طول المحور الأفقي دون التأثير على العناصر المرنة المجاورة؟ هنا تفيدك خاصية align-self.
قد تأخذ هذه الخاصية أحد القيم التالية:
auto || flex-end || flex-start || center|| baseline || stretch
flex-start: تضع العنصر في بداية محور التقاطع.
flex-end: تضع العنصر في نهاية محور التقاطع.
center: تضع العنصر في وسط محور التقاطع.
baseline: تضع العنصر على خط الأساس للنص (baseline)، الذي يعتمد على النصوص.
stretch: تضع العنصر ليملأ المساحة المتاحة على محور التقاطع.
مثال:
<ul>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
</ul>
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start; /* Affecting all flex items */
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
font-size: 2rem;
}
يقوم الكود السابق بتنسيق القائمة ul وعناصرها li كما يلي:
- display: flex: يجعل القائمة محتويًا على عناصر flex.
- justify-content: space-between: يوزع العناصر flex بتساوي بينها.
- align-items: flex-start: يحدد توزيع العناصر على بداية المحور العمودي (من الأعلى).
وستظهر العناصر بالشكل التالي:
العناصر المرنة المطلقة Absolute Flex Items والنسبية Relative Flex Items
من الضروي أن تفهم كذلك الفرق بين العنصر المرن المطلق والنسبي كي تستخدم الصندوق المرن بشكل صحيح، في الواقع يكمن الاختلاف الرئيسي بين هذين النموذجين في تخطيط العناصر له علاقة بالمسافة وكيفية حسابها.
العناصر المرنة المطلقة Absolute Flex Items
عندما تقوم بتحديد عنصر مرن كمرن مطلق position: absolute يتم إزالته من التدفق الطبيعي للصفحة، مما يعني أنه لا يأخذ مساحة في ترتيب العناصر العادي. ويتم تحديد موقعه بالنسبة لأقرب أصل يتم تحديده position: relative أو إذا لم يكن هناك أصل، فإنه يستند إلى أصل الصفحة.
العناصر المرنة النسبية Relative Flex Items:
عندما تقوم بتحديد عنصر مرن كمرن نسبي position: relative ا يتم إزالته من التدفق الطبيعي للصفحة، يحتفظ بالمساحة التي يحتلها في ترتيب العناصر العادي ويمكن تعديل موقعه باستخدام الخصائص top و right و bottom و left بالنسبة لموقعه الطبيعي.
الاختلاف الرئيسي:
بمعنى آخر يحسب التباعد داخل العنصر المرن نسبيًا بناءً على حجم المحتوى الخاص به أما العنصر المرن المطلق فهو يعتمد فقط على التدفق المرن وليس على المحتوى.
لاحظ هذا الكود:
<ul>
<li>This is just random text to support the point being explained. Some random text to support the point being explained.</li>
<li>This is a shorter random text.</li>
</ul>
ul {
display: flex; /* Activate flexbox */
}
li {
flex: auto; /* Remember, this is the same as flex: 1 1 auto; */
border: 2px solid red;
margin: 2em;
}
يُمثل هذا الكود قائمة غير مرتبة ul تحتوي على عنصرين في القائمة li والعناصر في القائمة لديها كميات مختلفة من المحتوى النصي. وقد استخدمت Flexbox في العنصر ul لأغراض تخطيط الصفحة. أما العناصر li فقد تم تصميمها بحيث تحتوي على حدود حمراء، ولكل منها هامش بقيمة 2em لتوفير تباعد بينها. وهنا استخدمت خاصية flex: auto على عناصر li، والتي تكافئ flex: 1 1 auto، مما يتيح لها الامتداد والانكماش حسب الحاجة.
دعنا نجعل العناصر المرنة مطلقة، بمعنى أن عرضها هذه المرة يجب أن يعتمد على حجم المحتوى المرن وليس حجم المحتوى، يمكن لتغيير تعليمة واحدة فقط في الكود أن يغير كل شيء في طريقة عرض العناصر.
<ul>
<li>This is just random text to support the point being explained. Some random text to support the point being explained.</li>
<li>This is a shorter random text.</li>
</ul>
ul {
display: flex; /* Activate flexbox */
}
li {
flex: 1; /* same as flex:1 1 0; */
border: 2px solid red;
margin: 2em;
}
فالعناصر المرنة المطلقة تحدد عرضها على أساس المرن فقط، بينما العناصر المرنة النسبية تحدد عرضها على أساس حجم المحتوى.
محاذاة الهامش التلقائي margin: auto
تستخدم الخاصية margin: auto لتحديد الهوامش أو المسافات لعنصر داخل صفحة الويب أو حاويته. وعند تعيين margin: auto; يحدث توسيع تلقائي للهامش مما يؤدي إلى توسيع العنصر على كل جانب ليحتل المساحة المتاحة بشكل متساوٍ.
عند استخدام margin: auto على العناصر المرنة، يمكن أن تبدو الأشياء غريبة تمامًا لذا تحتاج لفهم ما يجري فعند استخدام margin: auto على عنصر مرن فإن الاتجاه (يسار أو يمين أو كليهما) الذي يحتوي على القيمة auto سيشغل أي مساحات فارغة متاحة.
على سبيل المثال بفرض لدينا شريط التنقل التالي:
<ul>
<li>Brand</li>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
ul {
display: flex;
}
li {
flex: 0 0 auto;
}
في الكود أعلاه ضبطت قيمة النمو المرن بالصفر. وهذا ما يفسر سبب عدم توسيع عناصر القائمة كما تتم محاذاة العناصر المرنة مع بداية المحور الرئيسي (وهذا هو السلوك الافتراضي) ونتيجة المحاذاة مع بداية المحور الرئيسي ستترك بعض المساحة الإضافية على الجهة اليمنى.
الآن في حال استخدمت margin: auto مع عنصر القائمة الأول كما يلي:
li:nth-child(1) {
margin-right: auto; /* Applied only to the right side */
}
ستجد أنه يتم توزيع المساحة الإضافية الموجودة على يمين العنصر المرن الأول فعند استخدام margin: auto على عنصر مرن فإن الاتجاه (يسار أو يمين أو كليهما) الذي يحتوي على قيمة auto سيشغل أي مساحات فارغة متاحة.
ماذا لو أردت محاذاة الهامش تلقائيًا على جانبي العنصر المرن أي على اليمين واليسار كما في الكود التالي؟
ul {justify-content: flex-end؛}
li:nth-child(1) {
margin-left: auto;
margin-right: auto;
في هذه الحالة سيطبق الهامش تلقائيًا على جانبي عنصر القائمة الأول وتوزيع المساحة على جانبي العنصر المرن.
أخيرًا عند استخدام محاذاة الهامش التلقائي على عنصر مرن فإن خاصية ضبط المحتوى لن تعمل. على سبيل المثال لا يؤثر تعيين خيار محاذاة مختلف على الحاوية المرنة أعلاه عبر خاصية justify-content على التخطيط.
حالات الاستخدام العملي للـ Flexbox
يقدم Flexbox حلولاً عملية لمختلف تحديات التخطيط، خاصة في مجال هياكل التنقل وإليك أهم الحالات التي تحتاج فيها لاستخدام الصندوق المرن في CSS:
- تصميم قوائم التنقل المتجاوبة التي تتكيف بسلاسة مع أحجام الشاشات المختلفة. ويتم تحقيق ذلك باستخدام خصائص مثل flex-direction و flex-wrap للتحكم في التخطيط.
- تصميم أعمدة ذات ارتفاع متساوٍ من خلال تعيين الحاوية كحاوية مرنة والسماح للعناصر بالتمدد باستخدام align-items: Stretch، يمكنك التأكد من أن الأعمدة لها ارتفاع متساوٍ.
- تمركز العناصر: يمكنك من خلال Flexbox توسيط العناصر أفقيًا وعموديًا حيث تعمل الخصائص justify-content وalign-items على تسهيل توسيط المحتوى داخل حاوية ما.
- ترتيب العناصر: حيث يتيح لك Flexbox إعادة ترتيب العناصر بسهولة داخل الحاوية باستخدام خاصية order يمكن أن يكون هذا مفيدًا بشكل خاص لتغيير الترتيب المرئي للعناصر دون تغيير بنية HTML.
- أنظمة الشبكة المرنة: حيث يمكن استخدام Flexbox لإنشاء أنظمة شبكة مرنة للتخطيطات الديناميكية. ومن خلال دمجها مع استعلامات الوسائط، يمكنك تحقيق تصميمات سريعة الاستجابة تتكيف مع أحجام الشاشات المختلفة.
- النماذج المعقدة: فعند تصميم النماذج المعقدة، يعمل Flexbox على تبسيط محاذاة عناصر النموذج ومعالجة المسافات بينها. وينتج عن هذا تخطيط نموذج أكثر جاذبية بصريًا وسهل الاستخدام.
الخلاصة
تعرفت في مقال اليوم على نموذج الصندوق المرن الذي يعد أداة متعددة الاستخدامات لمعالجة مجموعة واسعة من تحديات التخطيط، ويوفر لك طريقة سهلة ومريحة لتصميم صفحات الويب وترتيب العناصر بكفاءة ونشاء واجهات مستخدم حديثة وسريعة الاستجابة.
