بودكاست CSS - 010: Flexbox
نمط التصميم الذي يمكن أن يكون صعبًا في التصميم سريع الاستجابة هو شريط جانبي يكون مضمّنًا مع بعض المحتوى. عندما تكون هناك مساحة لإطار العرض، يعمل هذا النمط بشكل رائع، ولكن عندما يتم تكثيف المساحة، يمكن أن يصبح هذا التخطيط الصلب مشكلة.
نموذج تخطيط المربع المرن (flexbox) هو نموذج تخطيط مصمم للمحتوى أحادي الأبعاد. إنه يجيد في أخذ مجموعة من العناصر ذات الأحجام المختلفة، وعرض أفضل تخطيط لتلك العناصر.
هذا هو نموذج التخطيط المثالي لنمط الشريط الجانبي هذا. لا يساعد Flexbox في وضع الشريط الجانبي والمحتوى بشكل مضمَّن، ولكن عندما لا توجد مساحة كافية، سينقسم الشريط الجانبي إلى سطر جديد. وبدلاً من ضبط أبعاد ثابتة ليتبعها المتصفّح، باستخدام flexbox، يمكنك بدلاً من ذلك توفير حدود مرنة لتوضيح كيفية عرض المحتوى.
ما أهمية التصميم المرن؟
تحتوي التخطيطات المرنة على الميزات التالية، والتي ستتمكن من استكشافها في هذا الدليل.
- ويمكن عرضها كصف أو عمود.
- تحترم وضع الكتابة للمستند.
- إنها عبارة عن سطر واحد افتراضيًا، ولكن قد يُطلب منك التفافها إلى عدة أسطر.
- يمكن إعادة ترتيب العناصر الموجودة في التخطيط بصريًا بعيدًا عن ترتيبها في DOM.
- يمكن توزيع المساحة داخل العناصر، بحيث تصبح أكبر وأصغر وفقًا للمساحة المتاحة في الوالدين.
- يمكن توزيع المساحة حول العناصر والخطوط المرنة في تصميم ملفوف، باستخدام خصائص محاذاة المربع.
- يمكن محاذاة العناصر نفسها على المحور المتقاطع.
المحور الرئيسي والمحور المتقاطع
السر في فهم نموذج flexbox هو فهم مفهوم المحور الرئيسي والمحور المتقاطع.
المحور الرئيسي هو المحور الذي تضبطه السمة flex-direction
.
إذا كان ذلك هو row
، يكون المحور الرئيسي على طول الصف،
وإذا كان column
يكون المحور الرئيسي بطول العمود.
تتحرك العناصر المرنة كمجموعة على المحور الرئيسي. تذكر: لدينا مجموعة من الأشياء ونحاول تقديم أفضل تخطيط لها كمجموعة.
يمتد المحور المتقاطع في الاتجاه الآخر إلى المحور الرئيسي،
لذلك إذا كانت flex-direction
هي row
، يمتد المحور المتقاطع على طول العمود.
يمكنك القيام بأمرين على المحور المتقاطع.
يمكنك نقل العناصر بشكل فردي أو كمجموعة حتى تتم محاذاتها مع بعضها البعض ومع الحاوية المرنة. أيضًا، إذا كان لديك خطوط مرنة ملتفة،
يمكنك التعامل مع هذه الخطوط كمجموعة للتحكم في كيفية تخصيص المسافة لتلك الخطوط.
سيظهر لك كل ذلك عمليًا في هذا الدليل،
ولكن عليك حاليًا الإشارة إلى أنّ المحور الرئيسي يتّبع flex-direction
.
جارٍ إنشاء حاوية مرنة
لنتعرّف على طريقة عمل flexbox من خلال أخذ مجموعة من العناصر ذات الأحجام المختلفة واستخدام flexbox لتصميمها.
<div class="container" id="container">
<div>One</div>
<div>Item two</div>
<div>The item we will refer to as three</div>
</div>
لاستخدام نموذج flexbox، يجب الإشارة إلى أنّك تريد استخدام سياق التنسيق المرن وليس تنسيقًا عاديًا أو تنسيقًا مضمَّنًا.
ويمكنك إجراء ذلك من خلال تغيير قيمة السمة display
إلى flex
.
.container {
display: flex;
}
كما تعلمت في دليل التنسيق، سيمنحك هذا مربعًا بمستوى الحظر، مع عناصر مرنة ثانوية. تبدأ العناصر المرنة على الفور في إظهار بعض سلوك الشاشة المرنة باستخدام القيم الأولية.
تعني القيم الأولية ما يلي:
- يتم عرض العناصر كصف.
- ولا يلتف.
- وهي لا تنمو لملء الحاوية.
- وتصطف في بداية الحاوية.
التحكم في اتجاه العناصر
مع أنّه لم تتم إضافة السمة flex-direction
بعد،
يتم عرض العناصر كصف لأنّ القيمة الأولية للسمة flex-direction
تساوي row
.
إذا كنت تريد صفًا، لست بحاجة إلى إضافة الموقع.
لتغيير الاتجاه، أضِف الخاصية وإحدى القيم الأربع:
row
: يتمّ وضع العناصر على شكل صف.row-reverse:
يتم وضع العناصر كصف من نهاية الحاوية المرنة.column
: يتم وضع العناصر كعمود.column-reverse
: يتم وضع العناصر كعمود من نهاية الحاوية المرنة.
يمكنك تجربة جميع القيم باستخدام مجموعة العناصر في العرض التوضيحي أدناه.
عكس تدفق العناصر وإمكانية الوصول
يجب توخي الحذر عند استخدام أي خصائص تعيد ترتيب العرض المرئي
بعيدًا عن ترتيب الأشياء في مستند HTML،
لأن ذلك يمكن أن يؤثر سلبًا في إمكانية الوصول.
وتُعدّ القيمتان row-reverse
وcolumn-reverse
مثالاً جيدًا على ذلك.
تحدث إعادة الترتيب فقط للترتيب المرئي، وليس بالترتيب المنطقي.
من المهم فهم ذلك لأن الترتيب المنطقي هو الترتيب الذي سيقرأ فيه قارئ الشاشة المحتوى بصوت عالٍ،
وسيتبعه أي شخص يتنقل باستخدام لوحة المفاتيح.
يمكنك أن ترى في الفيديو التالي كيف أنه في تخطيط الصف المعكوس، يتم فصل علامات التبويب بين الروابط عندما يتبع التنقل بلوحة المفاتيح عنصر DOM وليس العرض المرئي.
يمكن أن يتسبب أي شيء يمكنه تغيير ترتيب العناصر في Flexbox أو الشبكة في حدوث هذه المشكلة. لذلك، يجب أن تشمل أي عملية إعادة ترتيب اختبارًا شاملاً للتأكد من عدم صعوبة استخدام موقعك الإلكتروني لبعض المستخدمين.
لمزيد من المعلومات، يُرجى الاطّلاع على:
أوضاع الكتابة واتجاهها
يتمّ وضع العناصر المرنة تلقائيًا كصف. يجري الصف في الاتجاه الذي تتدفق فيه الجمل في وضع الكتابة واتجاه النص البرمجي. وهذا يعني أنه إذا كنت تعمل باللغة العربية والتي تحتوي على اتجاه النص البرمجي من اليمين إلى اليسار (rtl)، فستصطف العناصر على اليمين. سيبدأ ترتيب التنقل بـ Tab أيضًا على اليمين، فهذه هي طريقة قراءة الجمل باللغة العربية.
إذا كنت تعمل باستخدام وضع الكتابة العمودي، مثل بعض الخطوط
الطباعية اليابانية، فسيتم تشغيل الصف عموديًا، من أعلى إلى أسفل.
يُرجى محاولة تغيير "flex-direction
" في هذا العرض التوضيحي الذي يستخدم وضع الكتابة العمودي.
وبالتالي، يرتبط سلوك العناصر المرنة تلقائيًا بوضع الكتابة في المستند. تتم كتابة معظم البرامج التعليمية باستخدام وضع الكتابة الإنجليزية، أو وضع الكتابة الأفقي من اليسار إلى اليمين. سيسهّل ذلك افتراض أنّ العناصر المرنة تقع على اليمين ويتم تشغيلها أفقيًا.
من خلال استخدام المحور الرئيسي والمحور المتقاطع بالإضافة إلى وضع الكتابة، قد يكون من الأسهل فهم تحدّثنا عن البداية والنهاية بدلاً من الأعلى والأسفل ولليسار واليمين. لكل محور بداية ونهاية. يشار إلى بداية المحور الرئيسي باسم البداية الرئيسية. لذا فإن العناصر المرنة لدينا تتم محاذاتها مبدئيًا من البداية. وتكون نهاية هذا المحور هي النهاية الرئيسية. وتكون بداية المحور المتقاطع متقاطعًا والنهاية متقاطعة.
التفاف العناصر المرنة
القيمة الأولية للسمة flex-wrap
هي nowrap
.
وهذا يعني أنه في حال عدم وجود مساحة كافية في الحاوية، ستتجاوز العناصر.
سيتم تقليص حجم العناصر التي يتم عرضها باستخدام القيم الأولية قدر الإمكان،
وذلك إلى حجم min-content
قبل حدوث تجاوز السعة.
لإتاحة التفاف العناصر، أضِف flex-wrap: wrap
إلى الحاوية المرنة.
.container {
display: flex;
flex-wrap: wrap;
}
عندما تلف حاوية مرنة، يتم إنشاء عدة خطوط مرنة. فيما يتعلق بتوزيع المساحة، يعمل كل سطر كحاوية مرنة جديدة. لذلك إذا كنت تقوم بإحاطة الصفوف، فلا يمكن الحصول على شيء ما في الصف 2 لمحاذاة شيء فوقه في الصف 1. هذا ما يعنيه كون flexbox أحادي البعد. يمكنك التحكم في المحاذاة في محور واحد أو صف أو عمود، وليس كلاهما معًا كما يمكننا أن نفعل في الشبكة.
اختصار التدفق المرن
يمكنك ضبط السمتَين flex-direction
وflex-wrap
باستخدام الاختصار flex-flow
.
على سبيل المثال، لضبط flex-direction
على column
والسماح بالتفاف العناصر:
.container {
display: flex;
flex-flow: column wrap;
}
التحكم في المساحة داخل العناصر المرنة
بافتراض أن حاويتنا تحتوي على مساحة أكبر مما هو مطلوب لعرض العناصر،
يتم ترتيب العناصر في البداية ولا تنمو لملء المساحة.
يتوقفوا عن النمو عند بلوغ حجم المحتوى الأقصى.
ويرجع ذلك إلى أنّ القيمة المبدئية لسمات flex-
هي:
flex-grow: 0
: لا يزداد حجم العناصر.flex-shrink: 1
: يمكن أن تتقلص العناصر بشكل أصغر منflex-basis
.flex-basis: auto
: حجم السلع الأساسي هوauto
.
ويمكن تمثيل ذلك بقيمة كلمة رئيسية تبلغ flex: initial
.
يتم تطبيق خاصية الاختصار flex
أو أرقام التعريف الطويلة لـ flex-grow
وflex-shrink
وflex-basis
على عناصر
الحاوية المرنة.
لزيادة حجم العناصر مع السماح بتوفير مساحة أكبر للعناصر الكبيرة الحجم، استخدِم flex:auto
.
يمكنك تجربة هذا باستخدام العرض التوضيحي أعلاه.
يؤدي ذلك إلى ضبط السمات على ما يلي:
flex-grow: 1
: يمكن أن يزيد حجم العناصر عنflex-basis
.flex-shrink: 1
: يمكن أن تتقلص العناصر أصغر منflex-basis
.flex-basis: auto
: حجم السلع الأساسي هوauto
.
عند استخدام السمة flex: auto
، ينتهي الأمر بأحجام مختلفة للعناصر،
إذ تتم مشاركة المساحة المشتركة بين العناصر بعد تحديد كل عنصر
بحجم أقصى للمحتوى.
لذلك سيحصل العنصر الكبير على مساحة أكبر.
لفرض أن تكون جميع العناصر ذات حجم متّسق وتجاهل حجم المحتوى، يتم تغيير
flex:auto
إلى flex: 1
في العرض التوضيحي.
يساعد هذا الإجراء على:
flex-grow: 1
: يمكن أن يزيد حجم العناصر عنflex-basis
.flex-shrink: 1
: يمكن أن تتقلص العناصر أصغر منflex-basis
.flex-basis: 0
: حجم السلع الأساسي هو0
.
يشير استخدام السمة flex: 1
إلى أنّ جميع العناصر بحجم صفري، وبالتالي فإنّ كل المساحة المتوفّرة في الحاوية المرنة متاحة للتوزيع.
بما أنّ جميع العناصر تحتوي على عامل flex-grow
بقيمة 1
، فهي تنمو جميعها بالتساوي، وتتم مشاركة المساحة بالتساوي.
السماح بزيادة عدد العناصر بمعدلات مختلفة
ولا تحتاج إلى منح كل العناصر flex-grow
عامل بقيمة 1
.
يمكنك تحديد عوامل flex-grow
مختلفة للعناصر المرنة.
في العرض التوضيحي أدناه، يتضمّن العنصر الأول flex: 1
والعنصر الثاني flex: 2
والعنصر flex: 3
الثالث.
ومع ازدياد هذه العناصر من 0
، تتم مشاركة المساحة المتاحة في الحاوية المرنة إلى ستة.
يتم إعطاء جزء واحد للعنصر الأول،
وجزءين إلى الثاني،
وثلاثة أجزاء إلى العنصر الثالث.
يمكنك تنفيذ الإجراء نفسه من flex-basis
للسمة auto
، ولكن سيكون عليك تحديد القيم الثلاث.
القيمة الأولى هي flex-grow
والثانية flex-shrink
والثالثة flex-basis
.
.item1 {
flex: 1 1 auto;
}
.item2 {
flex: 2 1 auto;
}
وهذه حالة استخدام أقل شيوعًا، لأنّ سبب استخدام flex-basis
للسمة auto
هو السماح للمتصفح باكتشاف توزيع المساحة.
إذا أردت التسبب في زيادة حجم أحد العناصر أكثر بقليل مما تقرر الخوارزمية، إلا أنه قد يكون مفيدًا.
إعادة ترتيب العناصر المرنة
يمكن إعادة ترتيب العناصر المتوفّرة في الحاوية المرنة باستخدام السمة order
.
تتيح هذه السمة ترتيب العناصر في المجموعات الترتيبية.
يتم وضع العناصر في الاتجاه الذي يفرضه flex-direction
،
والقيم الأدنى أولاً.
إذا كان لأكثر من سلعة واحدة القيمة نفسها، سيتمّ عرضها مع السلع الأخرى التي تتضمّن هذه القيمة.
يوضح المثال أدناه هذا الترتيب.
التحقّق من استيعابك
اختبِر معلوماتك عن مزايا flexbox
flex-direction
التلقائي هو
row
column
تتضمن الحاوية المرنة العناصر الثانوية تلقائيًا.
flex-wrap: wrap
مع display: flex
لالتفاف العناصر الثانويةيبدو أن هناك عنصرًا ثانويًا مرنًا، ما هي خاصية المرونة التي تساعد في تخفيف هذا؟
flex-grow
flex-shrink
flex-basis
نظرة عامة على محاذاة المربّع المرن
أحضر Flexbox مجموعة من الخصائص لمحاذاة العناصر وتوزيع المساحة بين العناصر. كانت هذه الخصائص مفيدة للغاية بحيث تم نقلها منذ ذلك الحين إلى مواصفاتها الخاصة، ستجدها في تخطيط الشبكة أيضًا. اطّلِع هنا على آلية عملها عند استخدام flexbox.
يمكن وضع مجموعة السمات في مجموعتَين. خصائص توزيع المساحة وخصائص المحاذاة. الخصائص التي توزّع المساحة هي:
justify-content
: توزيع المساحة على المحور الرئيسيalign-content
: توزيع المساحة على المحور المتقاطع.place-content
: اختصار لضبط كلتا السمتَين أعلاه.
الخصائص المستخدمة للمحاذاة في flexbox:
align-self
: لمحاذاة عنصر واحد على المحور المتقاطع.align-items
: تتم محاذاة كل العناصر كمجموعة على المحور المتقاطع.
وإذا كنت تعمل على المحور الرئيسي، ستبدأ السمات بـ justify-
.
وعلى المحور المتقاطع، تبدأ بـ align-
.
توزيع المساحة على المحور الرئيسي
مع استخدام HTML سابقًا، تم وضع العناصر المرنة كصف، هناك مساحة على المحور الرئيسي.
العناصر ليست كبيرة بما يكفي لملء الحاوية المرنة بالكامل.
يتم ترتيب العناصر في بداية الحاوية المرنة لأن القيمة الأولية لـ justify-content
هي flex-start
.
تصطف العناصر في البداية وتكون أي مسافة إضافية في النهاية.
أضِف السمة justify-content
إلى الحاوية المرنة،
وامنحها القيمة flex-end
،
ويتم وضع العناصر في نهاية الحاوية مع وضع المساحة الإضافية في بداية الحاوية.
.container {
display: flex;
justify-content: flex-end;
}
يمكنك أيضًا توزيع المسافة بين العناصر باستخدام justify-content: space-between
.
جرّب بعض القيم في العرض التوضيحي، وراجع MDN للاطّلاع على المجموعة الكاملة من القيم المحتملة.
باستخدام flex-direction: column
إذا غيّرت flex-direction
إلى column
، سيعمل justify-content
على العمود.
لتوفير مساحة إضافية في حاويتك عند العمل كعمود، يجب أن تمنح حاويتك القيمة
height
أو block-size
.
وإلا لن تكون لديك مساحة فارغة للتوزيع.
جرِّب القيم المختلفة، هذه المرة باستخدام تنسيق عمود flexbox.
توزيع المسافة بين الخطوط المرنة
باستخدام حاوية مرنة ملفوفة، قد تتوفّر لك مساحة لتوزيعها على المحور المتقاطع.
في هذه الحالة، يمكنك استخدام السمة align-content
مع القيم نفسها مثل justify-content
.
على عكس justify-content
التي تعمل على محاذاة العناصر مع flex-start
تلقائيًا،
القيمة الأولية لـ align-content
هي stretch
.
أضِف السمة align-content
إلى الحاوية المرنة لتغيير هذا السلوك التلقائي.
.container {
align-content: center;
}
جرّب هذا في العرض التوضيحي.
يتضمن المثال أسطرًا ملفوفة من العناصر المرنة،
وتحتوي الحاوية على block-size
لكي يتوفر لدينا مساحة فارغة.
الاختصار place-content
لضبط كل من justify-content
وalign-content
، يمكنك استخدام place-content
مع قيمة واحدة أو قيمتين.
سيتمّ استخدام قيمة واحدة لكلا المحورين، إذا حدّدت القيمة الأولى في align-content
والثانية في justify-content
.
.container {
place-content: space-between;
/* sets both to space-between */
}
.container {
place-content: center flex-end;
/* wrapped lines on the cross axis are centered,
on the main axis items are aligned to the end of the flex container */
}
محاذاة العناصر على المحور المتقاطع
على المحور المتقاطع، يمكنك أيضًا محاذاة العناصر داخل الخط المرن باستخدام align-items
وalign-self
.
وستعتمد المساحة المتاحة لهذه المحاذاة على ارتفاع الحاوية المرنة،
أو الخط المرن في حال وجود مجموعة ملفوفة من العناصر.
القيمة الأولية للسمة align-self
هي stretch
،
لذلك تمدّ العناصر المرنة في صف واحد حتى ارتفاع أطول عنصر تلقائيًا.
لتغيير هذا، أضِف السمة align-self
إلى أي من العناصر المرنة.
.container {
display: flex;
}
.item1 {
align-self: flex-start;
}
استخدِم أيًّا من القيم التالية لمحاذاة العنصر:
flex-start
flex-end
center
stretch
baseline
راجِع القائمة الكاملة للقيم في MDN.
يتضمّن الإصدار التجريبي التالي سطرًا واحدًا من العناصر المرنة يتضمّن flex-direction: row
.
يحدِّد العنصر الأخير ارتفاع الحاوية المرنة.
يحتوي العنصر الأول على السمة align-self
بقيمة flex-start
.
حاول تغيير القيمة على هذه الخاصية لمعرفة كيفية تحركها داخل مساحتها على المحور المتقاطع.
يتم تطبيق السمة align-self
على العناصر الفردية.
يمكن تطبيق السمة align-items
على الحاوية المرنة
لضبط كل خصائص align-self
الفردية كمجموعة.
.container {
display: flex;
align-items: flex-start;
}
في هذا العرض التوضيحي التالي، جرِّب تغيير قيمة align-items
لمحاذاة جميع العناصر على المحور المتقاطع كمجموعة.
لماذا لا يمكن استخدام ميزة "ضبط_الذات" في نموذج flexbox؟
تعمل العناصر المرنة كمجموعة على المحور الرئيسي. إذًا ليس هناك مفهوم لتقسيم عنصر فردي من تلك المجموعة.
في تنسيق الشبكة، تعمل السمتان justify-self
وjustify-items
على المحور المضمّن
لمحاذاة العناصر على هذا المحور داخل مساحة الشبكة.
نظرًا للطريقة التي تتعامل بها التنسيقات المرنة مع العناصر كمجموعة،
لا يتم تنفيذ هذه السمات في سياق مرن.
من المفيد أن تعرف أنّ تطبيق flexbox يعمل بشكل جيد للغاية مع الهوامش التلقائية.
إذا واجهت حاجة لتقسيم عنصر واحد من مجموعة،
أو فصل المجموعة إلى مجموعتين، فيمكنك تطبيق هامش للقيام بذلك.
في المثال أسفل العنصر الأخير، به هامش أيسر يبلغ auto
.
يمتص الهامش التلقائي كل المساحة في الاتجاه الذي يتم تطبيقه عليه.
وهذا يعني أنه يدفع العنصر إلى اليمين، مما يؤدي إلى تقسيم المجموعات.
كيفية توسيط عنصر رأسيًا وأفقيًا
يمكن استخدام خصائص المحاذاة لتوسيط عنصر داخل مربع آخر.
تعمل السمة justify-content
على محاذاة العنصر على المحور الرئيسي، وهو الصف. السمة align-items
على المحور المتقاطع.
.container {
width: 400px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
التحقّق من استيعابك
اختبِر معلوماتك عن مزايا flexbox
.container { display: flex; direction: ltr; }
للمحاذاة عموديًا مع Flexbox، استخدِم
.container { display: flex; direction: ltr; }
للمحاذاة أفقيًا مع الإطار المرن، استخدِم
.container { display: flex; direction: ltr; }
تتماشى العناصر المرنة تلقائيًا مع stretch
. إذا كنت تريد استخدام حجم المحتوى للعناصر
الفرعية، فأي من الأنماط التالية ستستخدمه؟
justify-content: flex-start
align-content: start
content
على محاذاة الخطوط المرنة، وليس محاذاة العناصر الثانوية.height: auto
align-items: flex-start
المراجِع
- يتضمن تنسيق المربع المرن CSS لخدمة MDN سلسلة من الأدلة التفصيلية مع أمثلة.
- دليل حيل CSS إلى Flexbox
- ماذا يحدث عند إنشاء حاوية Flexbox Flex
- كل ما تحتاج إلى معرفته عن التوافق في Flexbox
- ما حجم هذا الصندوق المرن؟
- حالات الاستخدام لـ Flexbox
- فحص تنسيقات CSS Flexbox وتصحيح الأخطاء فيها في "أدوات مطوري البرامج في Chrome"