1.5 פלקסבוקס פתרון

פתרון - פלקסבוקס

פתרון תרגיל 1 - Navbar רספונסיבי

<nav class="navbar">
    <div class="navbar-logo">MyBrand</div>
    <div class="navbar-links">
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">Products</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Blog</a>
        <a class="nav-link" href="#">Contact</a>
    </div>
</nav>

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

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

.navbar-logo {
    color: white;
    font-size: 22px;
    font-weight: bold;
}

.navbar-links {
    display: flex;
    gap: 10px;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
}

• justify-content: space-between שם את הלוגו בצד שמאל והקישורים בצד ימין
• align-items: center מיישר הכל אנכית באמצע
• gap: 10px על navbar-links יוצר רווח בין הקישורים

פתרון תרגיל 2 - מרכוז מושלם

<div class="page">
    <div class="center-box">
        <h1 class="center-title">Perfectly Centered</h1>
        <p class="center-text">This box is centered both horizontally and vertically.</p>
        <button class="center-btn">Click Me</button>
    </div>
</div>

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

.page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #ecf0f1;
}

.center-box {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.center-title {
    margin-bottom: 10px;
    color: #2c3e50;
}

.center-text {
    margin-bottom: 20px;
    color: #777;
}

.center-btn {
    padding: 12px 30px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

שלושה מאפיינים על ההורה: display: flex, justify-content: center, align-items: center. ועם min-height: 100vh הדף תופס את כל גובה החלון.

פתרון תרגיל 3 - רשת כרטיסים

<div class="card-grid">
    <div class="card">
        <h3 class="card-title">Product A</h3>
        <p class="card-desc">High quality wireless headphones with premium sound.</p>
        <span class="card-price">$49.99</span>
        <button class="card-btn">Add to Cart</button>
    </div>
    <div class="card">
        <h3 class="card-title">Product B</h3>
        <p class="card-desc">Compact Bluetooth speaker.</p>
        <span class="card-price">$29.99</span>
        <button class="card-btn">Add to Cart</button>
    </div>
    <div class="card">
        <h3 class="card-title">Product C</h3>
        <p class="card-desc">Professional studio monitor headphones with flat frequency response and comfortable design for long sessions.</p>
        <span class="card-price">$149.99</span>
        <button class="card-btn">Add to Cart</button>
    </div>
    <div class="card">
        <h3 class="card-title">Product D</h3>
        <p class="card-desc">Noise cancelling earbuds with great battery life.</p>
        <span class="card-price">$79.99</span>
        <button class="card-btn">Add to Cart</button>
    </div>
    <div class="card">
        <h3 class="card-title">Product E</h3>
        <p class="card-desc">Smart home speaker with voice assistant.</p>
        <span class="card-price">$99.99</span>
        <button class="card-btn">Add to Cart</button>
    </div>
    <div class="card">
        <h3 class="card-title">Product F</h3>
        <p class="card-desc">Portable DAC and headphone amplifier.</p>
        <span class="card-price">$59.99</span>
        <button class="card-btn">Add to Cart</button>
    </div>
</div>

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

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 30px;
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    flex: 1 1 280px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;

    /* make each card a flex column */
    display: flex;
    flex-direction: column;
}

.card-title {
    color: #2c3e50;
    margin-bottom: 10px;
}

.card-desc {
    color: #777;
    line-height: 1.6;
    flex: 1;  /* takes remaining space, pushes price and button down */
    margin-bottom: 15px;
}

.card-price {
    font-size: 24px;
    font-weight: bold;
    color: #27ae60;
    margin-bottom: 15px;
}

.card-btn {
    padding: 12px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

הטריק המרכזי: כל כרטיס הוא flex container עם flex-direction: column, ועל התיאור (card-desc) שמנו flex: 1 כדי שיתפוס את כל המקום הפנוי וידחוף את המחיר והכפתור לתחתית.

פתרון תרגיל 4 - Footer עם 3 עמודות

<footer class="footer">
    <div class="footer-col">
        <h4 class="footer-heading">TechCorp</h4>
        <p class="footer-text">Building innovative solutions for the modern web since 2020.</p>
    </div>
    <div class="footer-col">
        <h4 class="footer-heading">Quick Links</h4>
        <a class="footer-link" href="#">Home</a>
        <a class="footer-link" href="#">About Us</a>
        <a class="footer-link" href="#">Services</a>
        <a class="footer-link" href="#">Blog</a>
        <a class="footer-link" href="#">Careers</a>
    </div>
    <div class="footer-col">
        <h4 class="footer-heading">Contact</h4>
        <p class="footer-text">+972-50-1234567</p>
        <p class="footer-text">info@techcorp.com</p>
        <p class="footer-text">123 Tech Street, Tel Aviv</p>
    </div>
</footer>

.footer {
    display: flex;
    gap: 30px;
    padding: 40px 30px;
    background-color: #1a1a2e;
    color: white;
}

.footer-col {
    flex: 1;
}

.footer-heading {
    font-size: 18px;
    margin-bottom: 15px;
    color: #e0e0e0;
}

.footer-link {
    display: block;
    color: #9e9e9e;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-text {
    color: #9e9e9e;
    font-size: 14px;
    line-height: 1.8;
}

פתרון תרגיל 5 - Holy Grail Layout

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Holy Grail Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="layout">
        <header class="layout-header">
            <h1>My Website</h1>
        </header>
        <div class="layout-body">
            <aside class="sidebar sidebar-left">
                <h3>Navigation</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </aside>
            <main class="main-content">
                <h2>Main Content</h2>
                <p>This is the main content area. It takes up all the remaining horizontal space between the two sidebars.</p>
                <p>Add more content here to see how the layout behaves.</p>
            </main>
            <aside class="sidebar sidebar-right">
                <h3>Sidebar</h3>
                <p>Widgets, ads, or extra info go here.</p>
            </aside>
        </div>
        <footer class="layout-footer">
            <p>Footer - always at the bottom</p>
        </footer>
    </div>
</body>
</html>

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

body {
    font-family: Arial, sans-serif;
}

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

.layout-header {
    background-color: #2c3e50;
    color: white;
    padding: 20px 30px;
}

.layout-body {
    display: flex;
    flex: 1;  /* takes all remaining vertical space */
}

.sidebar {
    flex: 0 0 200px;  /* fixed 200px, no grow, no shrink */
    padding: 20px;
}

.sidebar-left {
    background-color: #ecf0f1;
}

.sidebar-left a {
    display: block;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
}

.sidebar-right {
    background-color: #f5f5f5;
}

.main-content {
    flex: 1;  /* takes all remaining horizontal space */
    padding: 30px;
}

.main-content h2 {
    margin-bottom: 15px;
    color: #2c3e50;
}

.main-content p {
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

.layout-footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 20px 30px;
    text-align: center;
}

ה-footer תמיד בתחתית בזכות min-height: 100vh על layout ו-flex: 1 על layout-body.

פתרון תרגיל 6 - סרגל חיפוש

<div class="search-bar">
    <span class="search-icon">Q</span>
    <input class="search-input" type="text" placeholder="Search anything...">
    <button class="search-btn">Search</button>
    <button class="filter-btn">Filters</button>
</div>

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

body {
    padding: 40px;
    font-family: Arial, sans-serif;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 600px;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #999;
    font-weight: bold;
}

.search-input {
    flex: 1; /* takes all available space */
    padding: 10px;
    border: none;
    background: transparent;
    font-size: 16px;
    outline: none;
}

.search-btn {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.filter-btn {
    padding: 10px 16px;
    background-color: transparent;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

flex: 1 על search-input גורם לו לתפוס את כל המקום שנשאר אחרי האייקון והכפתורים.

פתרון תרגיל 7 - Profile Section

<div class="profile">
    <img class="profile-avatar" src="https://via.placeholder.com/60" alt="Avatar">
    <div class="profile-info">
        <h3 class="profile-name">Dana Levy</h3>
        <p class="profile-role">Senior Frontend Developer</p>
        <p class="profile-bio">Building beautiful web experiences for 5+ years.</p>
    </div>
    <button class="follow-btn">Follow</button>
</div>

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

body {
    font-family: Arial, sans-serif;
    padding: 40px;
}

.profile {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    max-width: 700px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0; /* don't shrink the avatar */
}

.profile-info {
    flex: 1; /* takes remaining space, pushes follow button to the right */
}

.profile-name {
    font-size: 18px;
    color: #2c3e50;
}

.profile-role {
    font-size: 14px;
    color: #3498db;
    margin-bottom: 4px;
}

.profile-bio {
    font-size: 14px;
    color: #999;
}

.follow-btn {
    padding: 10px 24px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0; /* don't shrink the button */
}

flex: 1 על profile-info דוחף את ה-follow button לקצה הימני.

תשובות לשאלות

1. justify-content מול align-items - justify-content מיישר על הציר הראשי (אופקי ב-row). align-items מיישר על הציר המשני (אנכי ב-row). אם flex-direction: column, הצירים מתהפכים.

2. space-between מול space-evenly - ב-space-between הפריט הראשון והאחרון צמודים לקצוות, והרווח רק ביניהם. ב-space-evenly כל הרווחים שווים - גם בין הפריטים וגם בין הפריטים לקצוות.

3. מתי flex-wrap - משתמשים ב-wrap כשיש הרבה פריטים ואנחנו רוצים שיעברו לשורה הבאה (כמו רשת כרטיסים). לא משתמשים כשרוצים שהכל ישאר בשורה אחת (כמו navbar).

4. flex: 1 מול flex: auto - flex: 1 = flex: 1 1 0 - הגודל הבסיסי הוא 0, אז המקום מתחלק שווה. flex: auto = flex: 1 1 auto - הגודל הבסיסי הוא לפי התוכן, אז פריט עם יותר תוכן יהיה יותר גדול.

5. דחיפה עם margin auto - אפשר לשים margin-left: auto (או margin-right) על פריט כדי לדחוף אותו לצד. למשל ב-navbar, שמים margin-left: auto על הקישור האחרון כדי לדחוף אותו ימינה.

6. flex: 0 0 200px ל-sidebar - זה אומר: לא גדל (0), לא מתכווץ (0), תמיד 200px. מושלם ל-sidebar שצריך להישאר ברוחב קבוע לא משנה מה. אם היינו משתמשים ב-width: 200px בלבד, Flexbox היה יכול לכווץ את ה-sidebar.