מחולל Flexbox

איך זה עובד

Flexbox אינו מסובך, אבל דבר אחד בו תופס כמעט את כולם: justify-content ו-align-items אינם אומרים אופקי ואנכי. הם אומרים לאורך הכיוון ולרוחבו, והכיוון הוא משהו שאתם קובעים.

המלכודת, בגלוי

עם flex-direction: row, justify-content עובד אופקית ו-align-items אנכית. עוברים ל-column והם מתחלפים לגמרי. כל שעה שאבדה ב-flexbox היא בעצם זה. ההסבר שמתחת מתעדכן כשמשנים את הכיוון, כך שהקשר נראה לעין ולא משוננן.

ציר ראשי וציר צולב

הציר הראשי הוא זה שהפריטים זורמים לאורכו, והוא נקבע על ידי flex-direction. הציר הצולב מאונך אליו. justify-content מחלק מקום לאורך הציר הראשי; align-items ממקם פריטים על הציר הצולב. אחרי ששני השמות האלה נקלטים, השאר נגזר מהם.

gap, ולמה הוא החליף מרווחים

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

nowrap פירושו כיווץ, לא גלישה

ברירת המחדל היא nowrap, והפריטים מתכווצים מתחת לגודלם הטבעי כדי להתאים ולא עוברים לשורה חדשה. לכן טקסט מתכווץ לפעמים באופן בלתי צפוי בתוך שורת flex. הגדרת wrap מאפשרת לפריטים לרדת למטה במקום; min-width: 0 על ילד מונע ממנו להתכווץ מתחת לתוכן שלו.

מרכוז בשני הכיוונים

justify-content: center עם align-items: center ממרכז פריט בשני הכיוונים ללא קשר ל-flex-direction, וזה השילוב היחיד ששווה לשנן במלואו.