تعلّم CSS Flexbox عبر بناء 5 تخطيطات متجاوبة خطوة بخطوة

مقدمة عملية إلى CSS Flexbox

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

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

ما هو Flexbox ولماذا يعد مهماً؟

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

يفيد Flexbox بشكل خاص في:

• بناء أشرطة التنقل Navigation Bars.
• ترتيب البطاقات Cards داخل الصفحات.
• إنشاء أعمدة جانبية Sidebars.
• ضبط المحاذاة العمودية والأفقية بسهولة.
• تصميم واجهات متجاوبة بأقل قدر من التعقيد.

معمارية Flexbox وفهم المحاور

يعتمد Flexbox على مفهومين أساسيين: المحور الرئيسي Main Axis والمحور المتقاطع Cross Axis. يتم توزيع العناصر الداخلية، والتي تُعرف باسم flex-items، وفق هذين المحورين.

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

أهم خصائص Flexbox التي ستستخدمها باستمرار

• display: flex; لتفعيل نظام Flexbox.
• flex-direction لتحديد اتجاه العناصر.
• justify-content للتحكم في توزيع العناصر على المحور الرئيسي.
• align-items لمحاذاة العناصر على المحور المتقاطع.
• gap لإضافة مسافات منتظمة بين العناصر.
• flex-basis لتحديد الحجم الابتدائي للعنصر.
• flex-grow للتحكم في تمدد العناصر داخل المساحة المتاحة.

قبل البدء: ما الذي تحتاج إلى معرفته؟

يفضّل أن تكون لديك معرفة أساسية بـ HTML وCSS. كما أن هذا الشرح يتضمن استخدام SCSS لتقليل التكرار وتسهيل كتابة القواعد. كذلك سنعتمد على media queries لبناء تخطيطات متجاوبة تتكيف مع الشاشات الصغيرة والكبيرة.

إعداد المشروع باستخدام SCSS

قبل كتابة أي تخطيط، من الأفضل تجهيز بعض المتغيرات وإعادة ضبط الأنماط الافتراضية للمتصفح. هذه الخطوة توفر وقتاً كبيراً، خصوصاً عند تكرار القيم مثل المسافات والحشوات ونقاط التوقف الخاصة بالاستجابة.

ما فائدة SCSS هنا؟

يمنحك SCSS ميزات إضافية مقارنة بـ CSS التقليدية، مثل:

• تخزين القيم في متغيرات.
• إنشاء mixins قابلة لإعادة الاستخدام.
• تنظيم الشيفرة بشكل أوضح.
• تقليل التكرار وتحسين قابلية الصيانة.

وإذا كنت تستخدم CodePen، يمكنك تفعيل SCSS بسهولة ثم متابعة الخطوات التالية:

تعريف المتغيرات الأساسية

$gap : 4vh ;
$padding : 4vh ;
$color : #48CAE4 ;

تحديد نقاط التوقف Breakpoints

$bp : (
  mobile : 480px ,
  tablet : 768px ,
  desktop : 1440px ,
);

إنشاء mixin خاص بالاستعلامات الإعلامية

@mixin query( $display ){
  @each $key , $value in $bp {
    @if ( $display == $key ){
      @media (max-width: $value ){
        @content ;
      }
    }
  }
}

إعادة ضبط الأنماط الافتراضية

*{
  margin : 0px ;
  padding : 0px ;
  box-sizing : border-box;

  body {
    width : 100% ;
    min-height : 100vh ;
    font-family : sans-serif;
    font-size : 45px ;
  }
}

فهم العلاقة بين الحاوية والعناصر الفرعية

من المهم أن تتذكر أن خصائص Flexbox تُطبَّق على العنصر الأب لكي تؤثر في العناصر الأبناء. فإذا طبّقت display: flex; على .container، فإن العناصر مثل .block-1 و.block-2 و.block-3 ستتأثر بهذا السلوك. وإذا طبّقت الخصائص على .block-1، فستؤثر حينها في العناصر من نوع .box-* داخلها.

المستوى الأول: بناء تخطيط بطاقات بسيط

سنبدأ بتخطيط سهل يرسخ فكرة توزيع العناصر على صفوف وأعمدة، ثم نطوره ليتجاوب مع شاشات الهواتف.

بنية HTML

<div class="container">
  <!--block-1 has 3 children, box-1,box-2,box-3 -->
  <div class="block-1">
    <div class="box-1">A</div>
    <div class="box-2">B</div>
    <div class="box-3">C</div>
  </div>

  <div class="block-2">
    <div class="box-4">D</div>
    <div class="box-5">E</div>
    <div class="box-6">F</div>
  </div>

  <div class="block-3">
    <div class="box-7">G</div>
    <div class="box-8">H</div>
    <div class="box-9">I</div>
  </div>
</div>

تنسيق الحاوية .container

.container {
  display : flex;
  flex-direction : column;
  gap: $gap ;
  padding : $padding ;
  border : 1vh solid $color ;
}

تنسيق جميع العناصر من النوع .block-*

[class^="block-"] {
  display : flex;
  flex-direction : row;
  height : ( 100vh - 2vh - $gap * 2 - $padding * 2 ) / 3 ;
  gap: $gap ;

  @include query (mobile){
    flex-direction : column;
    height : 500px ;
  }
}

تنسيق جميع العناصر من النوع .box-*

[class^="box-"] {
  display : flex;
  justify-content : center;
  align-items : center;
  flex-basis : ( 100% )/ 3 ;
  border : 2px solid black;
  border-radius : 10px ;
  background-color : #c1c1c1 ;
}

في هذا المثال، تُوزع الصناديق الثلاثة داخل كل صف بالتساوي بفضل الخاصية flex-basis. وعند الوصول إلى شاشة صغيرة، يتحول اتجاه الصف إلى عمودي باستخدام media query.

المستوى الثاني: إنشاء شريط تنقل متجاوب

يعد شريط التنقل من أشهر استخدامات Flexbox، لأنه يسمح بتوزيع الروابط بشكل متوازن على الأجهزة المختلفة.

بنية HTML

<div class="container">
  <div class="item-1">Home</div>
  <div class="item-2">About</div>
  <div class="item-3">Services</div>
  <div class="item-4">Contact</div>
</div>

تنسيق SCSS

.container {
  font-size : 35px ;
  display : flex;
  flex-direction : row;
  justify-content : space-evenly;
  padding : $padding ;
  border : 1vh solid $color ;

  @include query(tablet){
    height : 100vh ;
    flex-direction : column;
    align-items : center;
    gap: $gap
  }
}

الميزة الأهم هنا هي استخدام justify-content: space-evenly; لتوزيع الروابط بمسافات متساوية. وعند تصغير الشاشة إلى حجم الجهاز اللوحي أو أقل، يتحول الشريط إلى ترتيب عمودي أوضح وأسهل للمس.

المستوى الثالث: بناء تخطيط بعمود جانبي

هذا النوع من التخطيطات شائع في لوحات التحكم وصفحات المدونات والمتاجر الإلكترونية، حيث يوجد قسم جانبي وقسم رئيسي للمحتوى.

بنية HTML

<div class="container">
  <div class="block-1">Left</div>
  <div class="block-2">Right</div>
</div>

تنسيق الحاوية

.container {
  display : flex;
  flex-direction : row;
  gap: $gap ;
  padding : $padding ;

  @include query(mobile){
    flex-direction : column;
  }
}

تنسيق عناصر .block-*

[class^="block-"] {
  display : flex;
  justify-content : center;
  align-items : center;
  border : 4px solid $color ;
  height : 100vh - $padding * 2 ;

  @include query(mobile){
    height : 50vh - $padding * 2 ;
  }
}

توزيع المساحة بين العمودين

.block-1 {
  flex-grow : 2 ;
}

.block-2 {
  flex-grow : 8 ;
}

هنا تظهر فائدة flex-grow بوضوح؛ إذ يحصل العمود الأيسر على نسبة أصغر من المساحة، بينما يستحوذ العمود الأيمن على النسبة الأكبر لعرض المحتوى الرئيسي.

المستوى الرابع: تخطيط بطاقات أكثر مرونة

في هذا المستوى سنبني تخطيطاً غير متماثل، وهو مثال ممتاز لفهم كيف تساعد الخاصية flex-basis في تخصيص نسب مختلفة للعناصر.

بنية HTML

<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>

  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">E</div>
  </div>

  <div class="block-3">
    <div class="box-4">C</div>
    <div class="box-5">D</div>
  </div>
</div>

تنسيق الحاوية

.container {
  display : flex;
  flex-direction : column;
  padding : $padding ;
  gap: $gap ;
}

تنسيق عناصر .block-*

[class^="block-"] {
  display : flex;
  flex-direction : row;
  gap: $gap ;
  height : ( 100vh - $gap * 2 - $padding * 2 )/ 3 ;

  @include query(mobile){
    flex-direction : column;
  }
}

تنسيق عناصر .box-*

[class^="box-"] {
  display : flex;
  justify-content : center;
  align-items : center;
  border : 1vh solid $color ;
  border-radius : 10px ;
  background-color : #c1c1c1 ;
}

توزيع الأحجام داخل التخطيط

.box-1 {
  flex-basis : 100% ;
}

.box-2 , .box-5 {
  flex-basis : 70% ;
}

.box-3 , .box-4 {
  flex-basis : 30%
}

نسخة الجوال

@include query(mobile){
  .block-2 {
    height : ( 100vh * 2 )/ 3 ;
  }

  .block-3 {
    flex-direction : row;
  }

  .box-2 , .box-3 , .box-4 , .box-5 {
    flex-basis : 50% ;
  }
}

هذا المثال مفيد جداً لفهم التوازن بين الشكل الجمالي وقابلية الاستخدام، خصوصاً عندما تختلف نسب العناصر بين سطح المكتب والهاتف.

المستوى الخامس: تخطيط Holy Grail الشهير

يُعد هذا التخطيط من أشهر الهياكل الكلاسيكية في تصميم الويب، لأنه يجمع بين رأس الصفحة والمحتوى الجانبي والمحتوى الرئيسي والتذييل ضمن بنية متوازنة وسهلة التكيّف.

بنية HTML

<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>

  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">C</div>
    <div class="box-4">D</div>
  </div>

  <div class="block-3">
    <div class="box-5">E</div>
  </div>
</div>

تنسيق الحاوية

.container {
  display : flex;
  flex-direction : column;
  gap: $gap ;
  padding : $padding ;
}

تنسيق عناصر .block-*

[class^="block-"] {
  display : flex;
  flex-direction : row;
  gap: $gap ;
}

تنسيق عناصر .box-*

[class^="box-"] {
  display : flex;
  justify-content : center;
  align-items : center;
  border : 1vh solid $color ;
  border-radius : 10px ;
}

تحديد المساحات النسبية للعناصر

.box-1 , .box-5 {
  flex-basis : 100% ;
  height : 20vh ;
}

.box-3 {
  flex-basis : 60% ;
  height : 60vh - $gap * 2 - $padding * 2 ;
}

.box-2 , .box-4 {
  flex-basis : 20% ;
}

تكييف التخطيط مع الجوال

@include query(mobile){
  .block-2 {
    flex-direction : column;
    height : 60vh ;
  }

  .box-2 {
    display : none;
  }

  .box-3 {
    flex-basis : 80% ;
  }
}

لاحظ هنا كيف يمكن إخفاء بعض العناصر غير الضرورية في الهاتف باستخدام display: none; لتحسين تجربة المستخدم، مع توسيع مساحة المحتوى الأهم.

أفضل ممارسات عند استخدام Flexbox

• ابدأ دائماً بتحديد العنصر الأب الذي يجب أن يحمل الخاصية display: flex;.
• استخدم gap بدلاً من الهوامش قدر الإمكان للحصول على مسافات أكثر اتساقاً.
• لا تخلط بين justify-content وalign-items قبل فهم المحور الرئيسي والمتقاطع.
• اختبر التخطيط على أكثر من حجم شاشة، وليس على سطح المكتب فقط.
• استخدم SCSS أو متغيرات CSS لتوحيد القيم المتكررة.

متى تستخدم Flexbox ومتى تحتاج إلى Grid؟

رغم قوة Flexbox، فإنه الأنسب عادةً للتخطيطات أحادية البعد، أي عندما تتعامل أساساً مع صف أو عمود. أما إذا كنت تبني شبكة معقدة ذات صفوف وأعمدة في الوقت نفسه، فقد يكون CSS Grid خياراً أنسب.

بمعنى أبسط:

• استخدم Flexbox للعناصر الخطية مثل القوائم والأزرار والأشرطة والبطاقات البسيطة.
• استخدم Grid عندما تحتاج إلى تخطيط شبكي شامل للصفحة.

الخلاصة التقنية

CSS Flexbox ليس مجرد أداة لترتيب العناصر، بل هو أساس عملي لبناء واجهات متجاوبة وقابلة للتوسع. ومن خلال التدرج في هذه الأمثلة الخمسة، يتضح أن فهم خصائص مثل flex-direction وflex-basis وflex-grow وjustify-content كفيل بنقلك من مرحلة التنسيق العشوائي إلى تصميم تخطيطات أكثر احترافية. وإذا أتقنت هذه الأساسيات جيداً، فستتمكن من بناء عدد كبير من واجهات الويب الحديثة بكفاءة وسرعة.