השוואה בין Flexbox, Grid ו-Column Layouts
מאמר זה מסביר את ההשוואה בין Flexbox, Grid ו-Column Layouts.
תלמדו על ההבדלים בין Flexbox, Grid ו-Column Layouts ומתי להשתמש בכל אחד מהם.
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 Layouts
ב-CSS, flex, grid ו-columns הם כולם טכניקות ליישור וסידור אלמנטים, אבל לכל אחת יש את היתרונות והמקרים האידיאליים לשימוש בה. להלן הסבר ברור על ההבדלים ביניהן באמצעות השוואה.
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 ל-column.
1.flex-container {
2 flex-direction: column;
3}כאשר flex-direction מוגדר ל-column, האלמנטים משתנים מפריסת אופקית לאנכית. הפריסה משתנה משמאל-לימין למעלה-למטה.
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 לא רק לשינוי סדר התצוגה אלא גם ליצירת פריסות ייחודיות.
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 | Columns |
|---|---|---|---|
| ממד פריסה | 1D (אופקי או אנכי) | 2D (אופקי ואנכי) | 1D (אנכי) |
| הטוב ביותר עבור | יישור רכיבים | מבנה עמוד מלא | טקסט מרובה עמודות |
| גמישות פריסה | גבוהה (סדר וגודל) | גבוהה מאוד (הגדרת אזור) | נמוכה (פיצול אוטומטי בלבד) |
| שליטה באובייקטים פנימיים | גמיש | מוגדר בבירור | קשה לשליטה |
| כוונת הפריסה | מבוססת תוכן | מבוססת פריסה | מבוססת טקסט |
סיכום
- Flexbox הוא אידיאלי כשרוצים ליישר אלמנטים בשורה, כמו כותרות או רשימות כרטיסים.
- Grid מתאים כשרוצים לעצב את כל הפריסה, כמו מבנה של דף אינטרנט.
- Columns הם הטובים ביותר כשרוצים לעצב טקסט לכמה עמודות, כמו במאמרים או בלוגים.
ניתן גם לשלב אותם לפי הצורך. לדוגמה, אתם יכולים לעצב את הפריסה הכוללת עם Grid וליישר אלמנטים פנימיים באמצעות Flex.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.