הFlexbox עשה לכולנו חיים קלים ואיפשר לנו לבנות גרידים בפשטות. בעזרתו מספיק לזרוק לאב 3 שורות CSS ולהגדיר לעמודות את הרוחב ומקבלים גריד עמודות. מה שניקרא, קל.
אך גם הFlexbox הוא לא מושלם ולפעמים דורש פלסטרים קטנים כדי ליישר אותו לאיך שאנחנו רוצים. היום אשתף אותכם בטריק קטן שאני משתמש בו בכל פעם שאני בונה גריד עמודות, טריק המאפשר לי לסדר חורים הנוצרים כאשר אין לנו מספיק אלמנטים בשורה.
הבעיה
לרוב כאשר מיישמים גריד עמודות בעזרת Flexbox מיישמים על האב את המאפיין justify-content: space-between , המאפיין מבצע בצורה מילולית, בכל שורה הרווח בין כל האלמנטים יהיה שווה.
כאשר השורה מלאה אין עם זה בעיה, אך מה קורה כאשר חסר אלמנט? נוצר חור. הדפדפן מבצע את מה שביקשתם, רווח שווה בין האלמנטים.
הפתרון
חסר אלמנט? אין בעיה, נוסיף אלמנט פסאודו שבעזרת הכוחות של הFlexbox יקבל גודל דינמי ויתרחב במידת הצורך וימלא את החסר.
.wrapper.fixed::after {
content: "";
flex-basis: 33%;
flex-grow: 0;
}הסבר קטן
flex-basis– פה באחוזים/פיקסלים אנחנו מגדירים כמה מקום שאנחנו רוצים למלא.flex-grow– פה הקסם קורה, הגדרה של מאפיין זה ל0 אומרת שבמידה ואין מקום פנוי, אל תתרחב ותתפוס מקום.
סיכום
פשוט לא? בעתיד אפרסם פוסט על css-grid, שם לא צריך פלסטרים בשביל לבנות גריד😀
מצרף Codepen להמחשת הבעיה והפתרון
See the Pen flexbox 3 column grid fix by Ron (@ronka) on CodePen.
