شرح CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب

تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب

CSS Flexbox (Flexible Box Layout) هو نموذج تخطيط في CSS يُستخدم لترتيب العناصر داخل الحاوية بطريقة مرنة وديناميكية، مما يسهل تصميم layouts معقدة دون الحاجة إلى استخدام تقنيات مثل Floats أو Positioning. Flexbox مناسب بشكل خاص لتصميم واجهات مستخدم متجاوبة (Responsive Design).

أساسيات Flexbox

الحاوية (Flex Container):

هي العنصر الذي يتم تطبيق display: flex أو display: inline-flex عليه.

جميع العناصر الفرعية داخل الحاوية تصبح عناصر مرنة (Flex Items).

العناصر المرنة (Flex Items):

هي العناصر الفرعية داخل الحاوية المرنة.

يمكن التحكم في ترتيبها وحجمها ومحاذاتها باستخدام خصائص Flexbox.

خصائص الحاوية (Flex Container)

• display: flex | inline-flex:
  • flex: يجعل الحاوية كتلة مرنة.
  • inline-flex: يجعل الحاوية عنصرًا سطريًا مرنًا.
• flex-direction:

  يحدد اتجاه العناصر داخل الحاوية.

  القيم الممكنة: row (افتراضي)، row-reverse، column، column-reverse.

• flex-wrap:

  يحدد ما إذا كانت العناصر ستلتف إلى سطر جديد إذا لم يكن هناك مساحة كافية.

  القيم الممكنة: nowrap (افتراضي)، wrap، wrap-reverse.

• justify-content:

  يحدد كيفية توزيع العناصر على طول المحور الرئيسي (Main Axis).

  القيم الممكنة: flex-start (افتراضي)، flex-end، center، space-between، space-around، space-evenly.

• align-items:

  يحدد كيفية محاذاة العناصر على طول المحور العرضي (Cross Axis).

  القيم الممكنة: stretch (افتراضي)، flex-start، flex-end، center، baseline.

• align-content:

  يحدد كيفية توزيع المساحة بين العناصر على طول المحور العرضي عندما يكون هناك أكثر من سطر.

  القيم الممكنة: stretch (افتراضي)، flex-start، flex-end، center، space-between، space-around.

خصائص العناصر المرنة (Flex Items)

• order:

  يحدد ترتيب العنصر داخل الحاوية.

  القيمة الافتراضية: 0.

• flex-grow:

  يحدد مدى نمو العنصر بالنسبة للعناصر الأخرى عند وجود مساحة إضافية.

  القيمة الافتراضية: 0.

• flex-shrink:

  يحدد مدى انكماش العنصر بالنسبة للعناصر الأخرى عند عدم وجود مساحة كافية.

  القيمة الافتراضية: 1.

• flex-basis:

  يحدد الحجم الافتراضي للعنصر قبل توزيع المساحة المتبقية.

  القيمة الافتراضية: auto.

• align-self:

  يسمح بتجاوز محاذاة العنصر الفردي على المحور العرضي.

  القيم الممكنة: auto (افتراضي)، flex-start، flex-end، center، baseline، stretch.

مثال بسيط

[HTML] 
  <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
  

[CSS] 
  .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.item {
  flex: 1;
  margin: 10px;
  padding: 20px;
  background-color: lightblue;
  text-align: center;
}
  

معـــــايـــنة

1

2

3

في هذا المثال:

• الحاوية (container) تستخدم Flexbox لتوزيع العناصر (items) بشكل متساوٍ مع مسافة بينها.
• العناصر تتم توسيعها لتملأ المساحة المتاحة (flex: 1).
• العناصر تتم محاذاتها في المنتصف على المحور العرضي (align-items: center).

استخدامات Flexbox

• تصميم layouts متجاوبة: يمكن استخدام Flexbox لإنشاء layouts تتكيف مع أحجام الشاشات المختلفة.
• محاذاة العناصر: Flexbox يوفر طرقًا سهلة لمحاذاة العناصر أفقياً وعمودياً.
• توزيع المساحة: يمكن توزيع المساحة بين العناصر بشكل متساوٍ أو حسب الحاجة.

Flexbox هو أداة قوية وفعالة لتصميم واجهات مستخدم مرنة ومتجاوبة، ويُعتبر من الأدوات الأساسية في تطوير الويب الحديث.