أساسيات Flexbox في CSS مع أمثلة عملية


محمد أبرص

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

flexbox.thumb.png.de36807850514de977a6e1

إنشاء حاوية مرنة Flex Container

إن الخطوة الأولى في هيكلة أجزاء الصفحة باستخدام الصندوق المرن flexbox هي إنشاء المستوعبة/الحاوية المرنة flex container، وذلك من خلال إسناد قيمة الخاصية display إلى flex، مع الانتباه إلى إضافة البادئة webkit- من أجل المتصفح ‹‹سفاري›› Safari.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
}

توضيع العناصر المرنة Flex Items ضمن صف Row

عناصر الصندوق المرن ما هي إلا أبناء (عناصر فرعية) من الحاوية المرنة flex container، وتتموضع على طول محور رئيسي main axis ومحور جانبي cross axis، المحور الرئيسي هو أفقي افتراضيًا، ولذلك العناصر تتموضع ضمن صف، ومن الممكن تغيير اتجاه المحور الرئيسي من خلال إسناد flex-direction إلى القيمة column، والتي هي افتراضيا row.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}
 
 
 
 

توضيع العناصر المرنة Flex Items ضمن عمود Column

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}
 
 
 
 

نقل العناصر المرنة Flex Items إلى الجهة العلوية

يَعتمد نقل العناصر المرنة إلى الأعلى على اتجاه المحور الرئيسي main axis، فإن كان عموديًا vertical، يُمكن استخدام الخاصية align-items، وإن كان أفقيًا horizontal، فيُمكن استخدام الخاصية justify-content.

.flexcontainer {
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}
 
 
 
 
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}
 
 
 
 

نقل العناصر المرنة Flex Items إلى جهة اليمين

يَعتمد نقل العناصر إلى جهة اليسار أو جهة اليمين على اتجاه المحور الرئيسي أيضًا، فإن كان flex-direction معينًا إلى row (صف)، عندها يجب استخدام justify-content، وإن كان مُعيّنًا إلى column (عمود)، عندها يجب استخدام align-items.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}
 
 
 
 
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; 
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}
 
 
 
 

نقل العناصر المرنة Flex Items إلى جهة اليسار

 .flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}

 

 
 
 
 
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}
 
 
 
 

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

يُعتبر توسيط العناصر في المستوعبة سواء كان عموديًا أو أفقيًا سهلًا للغاية، كل ما يجب فعله هو إسناد justify-content و/أو align-items إلى القيمة center، ويعتمد الأمر دائمًا على اتجاه المحور الأساسي main axis وذلك فيما إذا كان قيمة الخاصية flex-direction مسندة إلى القيمة row أو column.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}
 
 
 
 
 

 

 
 
 
 

تكبير حجم عنصر مرن Flex Item نسبة إلى العناصر المرنة الأخرى

يُمكن تحديد كيف لعنصر مرن أن يزداد أو بنقص بالحجم نسبة إلى باقي العناصر الأخرى في المستوعبة، ولتطبيق ذلك يمكن إسناد القيمة المطلوبة ولكل عنصر ومن خلال الخاصية flex، ففي المثال التّالي، تمّ زيادة حجم أحد العناصر إلى ضعف حجم العنصر الآخر.

.bigitem {
   -webkit-flex: 2 0 0; 
   flex: 2 0 0; 
}
.smallitem {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}
 
 

التفاف العناصر المرنة إلى صفوف Wrap flex items into rows

تأخرت بعض المتصفحات في دعم هذه الخاصية مثل متصفح Firefox، على العموم من المفترض أن تعمل هذه الخاصية في الوقت الحالي مع جميع المتصفحات بإصداراتها الأخيرة.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   -webkit-align-content: flex-end;
   align-content: flex-end;
}
 
 
 
 
 
 
 
 
 
 
 
 

التفاف العناصر المرنة إلى أعمدة Wrap flex items into columns 

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch;
}

 
 
 
 
 
 
 
 

إزالة المساحة بين الأعمدة أو الصفوف الملتفة

تُقدّم الخاصية align-content للمطوّر إمكانية توزيع المساحة حول الأعمدة والصفوف الملتفة wrapped، وذلك بتقديم الخيارات التالية:

  • flex-start
  • flex-end
  • space-between
  • space-around
  • stretch

ولإزالة المساحة حول الأعمدة الملتفة، يمكن إسناد align-content إلى center.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: center;
   align-content: center;

}
 
 
 
 
 
 
 
 

تخصيص مكان العنصر في الحاوية

يُمكن للمطوّر التحكم بقيمة align-items لكل عنصر على حِدة باستخدام align-self، وكما يمكن أيضًا استخدام margins لتحريك أي عنصر وفي أي اتجاه من الاتجاهات الأربعة، فمثلًا لتوزيع أعمدة الصّفحة يُمكن تحريك العنصر المرن إلى أقصى يسار مستوعبته من خلال إسناد margin-right إلى القيمة auto.

.left {
   -webkit-align-self: flex-start;
   align-self: flex-start;
}

.right {
   margin-left: auto;
}
 
 
 
 

خاتمة

خاصيّة الصندوق المرن خاصيّة رائعة ومن الضروري على مطوّر الويب إضافتها إلى أدواته في التطوير خاصة وأنها أصبحت مدعومة بشكل جيّد مع المتصفحات.

ترجمة وبتصرّف للمقال The Ultimate Flexbox Cheat Sheet.





تفاعل الأعضاء


موضوع رائع ومكمل للموضوع المشار اليه .. وجميلة فكرة الشرح بالأمثلة .. شكرا لكم وشكرا اكاديمية حسوب

1 شخص أعجب بهذا

شارك هذا التعليق


رابط هذا التعليق
شارك على الشبكات الإجتماعية


يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن