הצמדת אלמנט לתחתית קונטיינר באמצעות flex-grow

כבר כתבתי בעבר מדריך המתיימר לכסות את הנושא של Flexbox. קיימת תכונה המוזכרת שם בקצרה ומאד שימושית כשיוצרים גריד כזה או אחר. אתן הקדמה קצרה לפני שנמשיך – כמעט בכל אתר שאני מפתח קיים שימוש בסוג של גריד כאשר האלמנטים בגריד הם בעלי גובה זהה (ראו דוגמה מטה).

הכל נחמד ועובד יפה עד לרגע בו הלקוח מעוניין להוסיף טקסט באורך שונה בכל אחד מהאלמנטים, אחרי הכל הרצון והדרישה לעשות זאת הגיוניים בהחלט. פתרון אחד לנושא הוא לקבוע הגבלה לכמות המילים או האותיות שיוצגו בכל אלמנט כבדוגמה הבאה:

ומה הבעיה עם זה?

גישה זו די מוגבלת כפי שאתם מבינים. אם הלקוח מעוניין בכמות טקסט שונה באלמנטים, או נאמר והוא מעוניין להוסיף תמונה לאחד האלמנטים אז אומנם גובהם יישאר זהה מטבעה של Flexbox – אך נגיע למצב בו אלמנטים כגון הכפתורים בתחתית לא יהיו מיושרים אחד לשני בין ה Flex Items כבדוגמה הבאה:

כותרת

לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם. דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם סולגק.

כפתור

כותרת

לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם סולגק לכנוץ בעריר גק ליץ לורפ אי.

כפתור

Flexbox מספקת פתרון מצויין למקרים אלו כך שלא נאלץ לחתוך את הטקסט, להגביל את מספר המילים ולמנוע מהלקוח להחליט על התוכן. ללקוח תהיה האפשרות להכניס איזה תוכן שירצה לאלמנטים והכפתור שלנו ימשיך להצמד מטה.

Flex Containers מבצעים חישוב של השטח הפנוי בתוכם ומאפשרים לנו גמישות הרבה גבוהה יותר למשחק עם התוכן. באמצעות Flexbox והתכונה flex-grow אנו יכולים ליצור את הדבר הבא די בקלות:

כותרת

לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם. דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם סולגק.

כפתור

כותרת

לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם סולגק. ושבעגט ליבם סולגק לכנוץ בעריר גק ליץ לורפ אי.

כפתור

אני מדבר על זה שהכפתור מוצמד מטה ולא משנה איזה תוכן אכניס לאלמנט כזה או אחר. אולי נשמע טריוויאלי אך נתקלתי בהמון מפתחים שאינם מכירים שיטה זו ומשתמשים בטכניקות מיושנות כגון שימוש במיקום אבסולוטי, בתכונה min-height וכדומה.

כפי שציינו בתגובות – ניתן לבצע זאת על ידי הוספת margin-top : auto לכפתור, אך בואו נראה כיצד לעשות זאת באמצעות Flexbox…

הפתרון – שימוש ב flex-grow

הפתרון כפי שציינתי הוא באמצעות התכונה flex-grow (עליה עוד אכתוב בעתיד), על כל מקרה בואו נראה שלב שלב כיצד אנו מגיעים לדוגמה האחרונה שהצגתי:

שלב 1 – כתיבת ה Markup

יצרתי קונטיינר בסיסי המכיל מספר אלמנטים כאשר כל אחד מהם מכיל בתוכו מספר אלמנטים נוספים כגון כותרת, תמונה, טקסט כלשהו וכפתור.

<div class="flex-alignment">
    <div>
        <h2>כותרת</h2>
        <p>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם. דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם סולגק.
        </p>
        <a href="">כפתור</a>
    </div>
    <div>
        <h2>כותרת</h2>
        <img src="https://via.placeholder.com/450x200?text=Nice+Picture"/>
        <p>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט ליבם סולגק.</p>
        <a href="">כפתור</a>
    </div>
</div>

שלב 2 – קביעתו כ – Flex Container

כפי שציינתי במדריך שכתבתי על Flexbox, הדבר היחיד שצריך לבצע בכדי ליצור Flex Container הוא להוסיף את השורה display : flex לקונטיינר המכיל את האלמנטים וזאת בכדי שנוכל לשלוט באותם ״ילדים״ הקיימים באותו קונטיינר.

.flex-alignment {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

אותם ״ילדים״ הם שני ה <div> הנמצאים בתוך הקונטיינר בעל הקלאס .flex-alignment ב Markup שהצגתי בסעיף הקודם.

שלב 3 – הגדרת האלמנטים בתוך הקונטיינר כ Flex Containers בפני עצמם

הוספנו את התכונה display : flex גם לכל האלמנטים בתוך הקונטיינר הראשי בכדי שיימתחו ורטיקלית ויקבלו גובה זהה בכול שורה. כעת יש לנו שליטה באלמנטים הנמצאים בכל אחד מאלו (הכותרת, התמונה…) – נוכל להדביק אחר כך את הכפתור מטה בקלות:

.flex-alignment > div {
    display: flex;
    width: calc(50% - 10px);
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

כמובן שהתכונה width תשתנה בהתאם למספר האלמטים שאתם מעוניינים שיופיעו בגריד. הנה אגב פוסט מעניין בנושא על יצירת גריד רספונסיבי ללא Media Queries.

שלב 4 – קביעה כי הכפתור יצמד לחלקו התחתון של הקונטיינר

התכונה flex-grow מגדירה את היכולת של Flex Item לגדול ביחס לשאר האלמנטים הקיימים באותו Flex Container:

.flex-alignment p {
    flex-grow: 1;
}

במקרה זה קבענו כי האלמנט מסוג <p>, כלומר הטקסט הרץ בתוך האלמנט, יהיה בעל הערך flex-grow : 1, מכאן שתמיד ימתח וימלא את כל השטח הריק הקיים עבורו.

מכיוון ואנו משתמשים ב flex-direction : column לקונטיינר יחד עם התכונה flex-grow : 1 לתגית <p> – היא תמלא את השטח הריק מתחתיה והכפתור שלנו יידחף לתחתית הקונטיינר.

מכירים שיטות נוספות? אשמח אם תשתפו את כולנו בתגובות….