Articles
مقدمة إلى CSS
مقارنة بين تخطيطات Flexbox و Grid و Column

مقارنة بين تخطيطات Flexbox و Grid و Column

توضح هذه المقالة المقارنة بين تخطيطات Flexbox و Grid و Column۔

ستتعلم الفرق بين تخطيطات Flexbox و Grid و Column، ومتى تستخدم كل منها۔

YouTube Video

HTML للمعاينة

css-layout-comparision.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>CSS Properties Example</title>
 7  <link rel="stylesheet" href="css-base.css">
 8  <link rel="stylesheet" href="css-layout-comparision.css">
 9</head>
10<body>
11  <!-- Header -->
12  <header>
13      <h1>CSS Properties For Layout</h1>
14  </header>
15  <!-- Main content -->
16  <main>
17    <header>
18        <h2>Layout Comparision</h2>
19    </header>
20    <article>
21      <h3>flex</h3>
22      <section>
23        <section class="sample-view">
24          <div class="flex-container">
25            <div class="flex-item">Item 1</div>
26            <div class="flex-item">Item 2</div>
27            <div class="flex-item">Item 3</div>
28            <div class="flex-item">Item 4</div>
29            <div class="flex-item">Item 5</div>
30            <div class="flex-item">Item 6</div>
31            <div class="flex-item">Item 7</div>
32            <div class="flex-item">Item 8</div>
33            <div class="flex-item">Item 9</div>
34          </div>
35        </section>
36      </section>
37    </article>
38    <article>
39      <h3>grid</h3>
40      <section>
41        <section class="sample-view">
42          <div class="grid-box">
43            <div class="grid-item item1">Item 1</div>
44            <div class="grid-item item2">Item 2</div>
45            <div class="grid-item item3">Item 3</div>
46            <div class="grid-item item4">Item 4</div>
47            <div class="grid-item item5">Item 5</div>
48            <div class="grid-item item6">Item 6</div>
49            <div class="grid-item item7">Item 7</div>
50            <div class="grid-item item8">Item 8</div>
51            <div class="grid-item item9">Item 9</div>
52          </div>
53        </section>
54      </section>
55    </article>
56    <article>
57      <h3>column</h3>
58      <section>
59        <section class="sample-view">
60          <section class="columns-container">
61            <p class="columns-item">Item 1</p>
62            <p class="columns-item">Item 2</p>
63            <p class="columns-item">Item 3</p>
64            <p class="columns-item">Item 4</p>
65            <p class="columns-item">Item 5</p>
66            <p class="columns-item">Item 6</p>
67            <p class="columns-item">Item 7</p>
68            <p class="columns-item">Item 8</p>
69            <p class="columns-item">Item 9</p>
70          </section>
71        </section>
72      </section>
73    </article>
74  </main>
75</body>
76</html>

مقارنة بين تخطيطات Flexbox و Grid و Column

flex وgrid وcolumns في CSS هي جميعها تقنيات لتنسيق العناصر وترتيبها، لكن لكل منها نقاط قوة خاصة وحالات استخدام مثالية.۔ فيما يلي تفسير واضح لاختلافاتها من خلال المقارنة.۔

Flexbox（display: flex） 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    flex-wrap: wrap;
 6    background-color: lightblue;
 7    height: 200px;
 8}
 9
10.flex-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 70px;
15    height: auto;
16}

الميزات

  • مناسب لتخطيطات باتجاه واحد - سواء كانت أفقية أو عمودية.۔
  • يسمح بالتحكم المرن في الترتيب ومرونة العناصر.
  • الأفضل للتخطيطات الصغيرة الحجم مثل أشرطة التنقل ومجموعات الأزرار.۔

المزايا

  • يضبط حجم العناصر الفرعية تلقائيًا.۔
  • يمكنك تغيير ترتيب العناصر باستخدام خصائص مثل flex-direction و flex-wrap وorder.۔

مثال على تغيير ترتيب العرض

flex-direction

كمثال على تغيير ترتيب العرض، دعونا نضبط خاصية flex-direction إلى column.۔

1.flex-container {
2    flex-direction: column;
3}

عند ضبط flex-direction إلى column، تتحول العناصر من تخطيط أفقي إلى تخطيط عمودي.۔ يتغير التخطيط من اليسار إلى اليمين إلى الأعلى إلى الأسفل.۔

flex-wrap

إن إعداد wrap-reverse لخاصية flex-wrap يعكس ترتيب الخطوط الملفوفة عن الاتجاه المعتاد۔

1.flex-container {
2    flex-direction: row;
3    flex-wrap: wrap-reverse;
4}

بهذه الطريقة، يتم عرض الخطوط متكدسة من الأسفل إلى الأعلى۔

1.flex-container {
2    flex-direction: column;
3    flex-wrap: wrap-reverse;
4}

عند تعيين flex-direction إلى column وتعيين flex-wrap إلى wrap-reverse، يتم ترتيب العناصر عموديًا بينما تلتف الأعمدة من اليمين إلى اليسار۔ كما هو في هذا المثال، يتم عكس ترتيب الأعمدة من المعتاد (من اليسار إلى اليمين) ويتم إضافة العناصر من اليمين إلى اليسار۔

Grid（display: grid） 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 100px 100px;
 4    grid-template-rows: 50px 50px 50px;
 5    gap: 20px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16}

الميزات

  • مثالي لتخطيطات ثنائية الأبعاد.۔
  • يسمح بـ تعريف واضح لتخطيطات الشبكة.۔
  • رائع للتصميمات الأكثر تعقيدًا وهيكل الصفحة بشكل عام.۔

المزايا

  • يمكن تعريف الصفوف والأعمدة في وقت واحد.۔
  • يمكن وضع الأقسام باستخدام المناطق المسماة (grid-area).۔
  • يمكن وضع العناصر الفرعية بشكل حر داخل الشبكة، مما يتيح تحكمًا مرنًا في الترتيب.۔

مثال على تغيير ترتيب العرض

كمثال على تغيير ترتيب العرض، دعونا نستخدم خاصية grid-template-areas لتحديد مواضع العرض.۔

 1.grid-box {
 2    grid-template-areas:
 3        "item1 item4 item5"
 4        "item2 item6 item7"
 5        "item3 item8 item9";
 6}
 7
 8.item1 { grid-area: item1; }
 9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }

في هذا المثال، تُستخدم خاصية grid-template-areas لتحديد تصميم الشبكة الكامل بصريًا وتعيين أسماء مناطق لكل خلية۔ ثم، من خلال تعيين اسم grid-area المقابل لكل عنصر فرعي، يتم وضعها في المواقع المطلوبة۔ من خلال استخدام grid بهذه الطريقة، يمكنك ليس فقط تغيير ترتيب عرض العناصر بحرية ولكن أيضًا إنشاء تصميمات معقدة وفريدة بسهولة۔

Columns（column-count, column-width） 

 1.columns-container {
 2    background-color: lightblue;
 3    columns: 100px 3;
 4    column-gap: 20px;
 5    column-rule: 2px solid #333;
 6    padding: 10px;
 7}
 8
 9.columns-item {
10    background-color: lightskyblue;
11    text-align: center;
12    margin: 20px auto;
13    color: white;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    font-size: 1.2rem;
18    border: 1px solid #ccc;
19    height: 50px;
20}

الميزات

  • يمكنك بسهولة إنشاء أعمدة بأسلوب المجلات.۔
  • مثالي لتنسيق المحتوى النصي المتدفق.۔
  • يتبع ترتيب المصدر في HTML، مما يجعله أقل ملاءمة للتحكم في ترتيب العناصر.۔

المزايا

  • يمكنه تقسيم النصوص الطويلة تلقائيًا.۔
  • يمكنك بسهولة إنشاء تخطيطات بأسلوب الصحف.۔

جدول المقارنة

الخاصية / الحالة الاستخدامية Flexbox Grid أعمدة
أبعاد التخطيط 1D (أفقي أو عمودي) 2D (أفقي & عمودي) 1D (عمودي)
الأفضل لـ محاذاة المكونات هيكل الصفحة بالكامل نص متعدد الأعمدة
مرونة التخطيط عالية (في الترتيب والحجم) عالية جدًا (لتحديد المناطق) منخفضة (فقط التقسيم التلقائي)
التحكم في المكونات الفرعية مرن معرف بوضوح صعب التحكم
نية التخطيط مدفوع بالمحتوى مدفوع بالتخطيط مدفوع بالنص

الملخص

  • Flexbox مثالي عندما تريد محاذاة العناصر في صف واحد، مثل الرؤوس أو قوائم البطاقات۔
  • Grid مناسب عندما تريد تصميم التخطيط بأكمله، مثل هيكل صفحة الويب۔
  • الأعمدة هي الأفضل عندما تريد تنسيق النص في أعمدة متعددة، مثل المقالات أو المدونات۔

يمكنك أيضًا دمجها حسب الحاجة۔ على سبيل المثال، يمكنك تصميم التخطيط العام باستخدام Grid ومحاذاة العناصر الداخلية باستخدام Flex.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بتخطيط الأعمدةخصائص `overflow` و `contain`