CSS

Flexbox

מהו Flexbox?

Flexbox (Flexible Box) היא שיטת פריסה חד-ממדית (שורה או עמודה) שמקלה מאוד על סידור אלמנטים.

.container {
    display: flex;
}

מושגי יסוד

┌─────────────────────────────────────────────────────────────┐
│ Flex Container                                              │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━main axis━━━━━━━━━━━━━━━━━━━▶  │
│  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐            │
│ ▲│  Item  │  │  Item  │  │  Item  │  │  Item  │            │
│ ┃│   1    │  │   2    │  │   3    │  │   4    │            │
│ ┃└────────┘  └────────┘  └────────┘  └────────┘            │
│cross                                                        │
│axis                                                         │
│ ▼                                                           │
└─────────────────────────────────────────────────────────────┘

תכונות Container

flex-direction

כיוון הציר הראשי:

.container {
    flex-direction: row;           /* ברירת מחדל: שמאל לימין */
    flex-direction: row-reverse;   /* ימין לשמאל */
    flex-direction: column;        /* למעלה למטה */
    flex-direction: column-reverse; /* למטה למעלה */
}

justify-content

יישור על הציר הראשי:

.container {
    justify-content: flex-start;   /* התחלה (ברירת מחדל) */
    justify-content: flex-end;     /* סוף */
    justify-content: center;       /* מרכז */
    justify-content: space-between; /* רווחים בין הפריטים */
    justify-content: space-around;  /* רווחים מסביב */
    justify-content: space-evenly;  /* רווחים שווים */
}

flex-start:    [1][2][3]           
flex-end:                 [1][2][3]
center:           [1][2][3]        
space-between: [1]    [2]    [3]  
space-around:   [1]  [2]  [3]     
space-evenly:   [1]   [2]   [3]   

align-items

יישור על הציר המשני:

.container {
    align-items: stretch;     /* מותח (ברירת מחדל) */
    align-items: flex-start;  /* התחלה */
    align-items: flex-end;    /* סוף */
    align-items: center;      /* מרכז */
    align-items: baseline;    /* לפי קו הבסיס של הטקסט */
}

flex-wrap

גלישה לשורה הבאה:

.container {
    flex-wrap: nowrap;        /* ברירת מחדל: הכל בשורה אחת */
    flex-wrap: wrap;          /* גולש לשורות נוספות */
    flex-wrap: wrap-reverse;  /* גולש למעלה */
}

gap

רווח בין פריטים:

.container {
    gap: 20px;              /* רווח בין כל הפריטים */
    gap: 20px 10px;         /* שורה, עמודה */
    row-gap: 20px;          /* רק שורות */
    column-gap: 10px;       /* רק עמודות */
}

align-content

יישור שורות (כשיש wrap):

.container {
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: stretch;
}

תכונות Item

flex-grow

כמה האלמנט גדל יחסית לאחרים:

.item {
    flex-grow: 0; /* ברירת מחדל: לא גדל */
    flex-grow: 1; /* לוקח מקום זמין */
}

.item-1 { flex-grow: 1; } /* 25% */
.item-2 { flex-grow: 2; } /* 50% */
.item-3 { flex-grow: 1; } /* 25% */

flex-shrink

כמה האלמנט מתכווץ:

.item {
    flex-shrink: 1; /* ברירת מחדל: מתכווץ */
    flex-shrink: 0; /* לא מתכווץ! */
}

flex-basis

גודל התחלתי לפני grow/shrink:

.item {
    flex-basis: auto;   /* ברירת מחדל */
    flex-basis: 200px;  /* גודל התחלתי */
    flex-basis: 30%;
}

קיצור flex

.item {
    /* flex-grow flex-shrink flex-basis */
    flex: 0 1 auto;    /* ברירת מחדל */
    flex: 1;           /* flex: 1 1 0% */
    flex: auto;        /* flex: 1 1 auto */
    flex: none;        /* flex: 0 0 auto */
    flex: 1 0 200px;   /* גדל, לא מתכווץ, בסיס 200px */
}

align-self

דריסת align-items לפריט בודד:

.item {
    align-self: auto;       /* לפי ה-container */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
}

order

שינוי סדר הפריטים:

.item-1 { order: 3; } /* יופיע שלישי */
.item-2 { order: 1; } /* יופיע ראשון */
.item-3 { order: 2; } /* יופיע שני */

דוגמאות מעשיות

מרכוז מושלם

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

תפריט ניווט

<nav class="navbar">
    <a class="logo" href="#">לוגו</a>
    <ul class="nav-links">
        <li><a href="#">בית</a></li>
        <li><a href="#">אודות</a></li>
        <li><a href="#">שירותים</a></li>
        <li><a href="#">צור קשר</a></li>
    </ul>
</nav>

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

גריד כרטיסים

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px; /* גדל, מתכווץ, מינימום 300px */
    max-width: 400px;
}

Footer דביק

<body>
    <main>תוכן</main>
    <footer>פוטר</footer>
</body>

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* לוקח את כל המקום הזמין */
}

footer {
    /* תמיד למטה */
}

Holy Grail Layout

<div class="layout">
    <header>Header</header>
    <div class="content">
        <nav>Sidebar</nav>
        <main>Main Content</main>
        <aside>Sidebar</aside>
    </div>
    <footer>Footer</footer>
</div>

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    display: flex;
    flex: 1;
}

nav, aside {
    flex: 0 0 200px; /* רוחב קבוע */
}

main {
    flex: 1; /* לוקח את השאר */
}

סיכום

תכונות Container

תכונות Item

הבא: CSS Grid ➡️