גיליון צ'אטים מקיף זה של CSS flexbox יכסה את כל מה שאתה צריך לדעת כדי להתחיל להשתמש ב- flexbox בפרויקטים שלך ברשת.
פריסת ה- flexbox של CSS מאפשרת לעצב HTML בקלות. Flexbox מקל על יישור פריטים אנכית ואופקית באמצעות שורות ועמודות. פריטים "יתגמשו" לגדלים שונים כדי למלא את החלל. זה מקל על עיצוב רספונסיבי.
CSS flexbox נהדר לשימוש עבור הפריסה הכללית של האתר או האפליקציה שלך. זה קל ללמוד, נתמך בכל הדפדפנים המודרניים ולא לוקח כל כך הרבה זמן להבין את היסודות. בסוף מדריך זה, תהיה מוכן להתחיל להשתמש ב- flexbox בפרויקטים שלך ברשת.
המאמר כולל קובצי GIF מונפשים מועילים של סקוט דומס אשר יקלו על הבנה והדמיה של פלקסבוקס.
כל מאפייני ה- CSS Flexbox
הנה רשימה של כל מאפייני ה- CSS flexbox שבהם ניתן להשתמש כדי למקם אלמנטים ב- CSS. לאחר מכן תראה כיצד הם עובדים.
CSS שניתן להחיל על המיכל
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: || justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;CSS שניתן להחיל על פריטים / אלמנטים במיכל
order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: | auto; /* default auto */ flex: none | [ ? || ] align-self: auto | flex-start | flex-end | center | baseline | stretch;טרמינולוגיה
לפני שתלמד מה תכונות ה- flexbox עושות, חשוב להבין את המינוח הקשור. להלן הגדרות של מונחי ה- flexbox המרכזיים, הלקוחים ממפרט ה- W3C הרשמי ל- flexbox.
- ציר ראשי : הציר הראשי של מיכל פלקס הוא הציר העיקרי שלאורכו מונחים פריטי פלקס. הכיוון מבוסס על המאפיין לכיוון כיפוף.
- התחלה ראשית | הקצה הראשי :פריטי הגמישה ממוקמים בתוך המכולה החל בצד ההתחלתי הראשי והולך לכיוון הצד הראשי.
- גודל ראשי : הרוחב או הגובה של מיכל פלסטיק או פריט פלקס, אשר במימד הראשי, הוא הגודל הראשי של התיבה. מאפיין הגודל העיקרי שלו הוא אם כן מאפיין רוחב או גובה, לפי הממד העיקרי.
- ציר צלב : הציר הניצב לציר הראשי נקרא ציר הצלב. כיוונו תלוי בכיוון הציר הראשי.
- התחל צולב | חוצה-קצה : קווי גמיש מלאים בפריטים ומונחים במיכל החל בצד ההתחלה של מיכל הגמישה והולך לכיוון הצד הקצה.
- גודל צלב : הרוחב או הגובה של פריט פלקס, הממד הממוצע בין הצלב, הוא גודל הצלב של הפריט. המאפיין בגודל חוצה הוא לפי 'רוחב' או 'גובה' שנמצא בממד הצלב.
CSS Display Flex
display: flex is אומר לדפדפן שלך, "אני רוצה להשתמש ב- flexbox עם המכולה הזו, בבקשה."
divמחדל אלמנט display:block. אלמנט עם הגדרת תצוגה זו תופס את כל רוחב הקו בו הוא נמצא. להלן דוגמה לארבע חלוקות צבעוניות בחלוקה אב עם הגדרת ברירת המחדל לתצוגה:
כדי להשתמש ב- flexbox בחלק מהעמוד שלך, תחילה המיר את מיכל האב למיכל flex על ידי הוספה display: flex;ל- CSS של מיכל האב.
פעולה זו תאותחל את המיכל הזה כמיכל flex ויחיל כמה מאפייני ברירת מחדל של flex.
כיוון פלקס
flex-directionמאפשר לך לשלוט באופן הצגת הפריטים במכולה. האם אתה רוצה אותם משמאל לימין, מימין לשמאל, מלמעלה למטה או מלמטה למעלה? אתה יכול לעשות את כל אלה בקלות על ידי הגדרת flex-directionהמכל.
הסדר ברירת המחדל לאחר היישום display: flexהוא שהפריטים יסודרו לאורך הציר הראשי משמאל לימין. האנימציה שלהלן מראה מה קורה כאשר flex-direction: columnמתווסף לאלמנט המיכל.
אתה יכול גם להגדיר flex-directionל- row-reverseו column-reverse.
הצדק תוכן
justify-contentהוא מאפיין ליישור פריטים במיכל לאורך הציר הראשי (ראה דיאגרמת המינוח לעיל). זה משתנה בהתאם לאופן שבו התוכן מוצג. זה מאפשר לנו למלא כל שטח ריק בשורות ולהגדיר כיצד אנו רוצים 'להצדיק' אותו.
הנה שלנו האפשרויות הנפוצות ביותר בשימוש כדי להצדיק תוכן: flex-start | flex-end | center | space-between | space-around.
כך נראות האפשרויות השונות:
space-betweenמפיץ פריטים כך שהפריט הראשון מסתדר עם ההתחלה והאחרון שוצף עם הסוף. space-aroundדומה אך לפריטים יש שטח בגודל חצי משני קצותיו.
פריטי יישור גמיש
align-itemsמאפשר לנו ליישר פריטים לאורך ציר הצלב (ראה דיאגרמת המינוח לעיל). זה מאפשר למקם תוכן בדרכים רבות ושונות תוך שימוש בתוכן מצדיק ויישור פריטים זה לזה.
להלן האפשרויות הנפוצות ביותר המשמשות ליישור פריטים: flex-start | flex-end | center | baseline | stretch
במשך stretchלעבודה בדיוק היית מצפה, בעיצומה של האלמנטים חייב להיות מוגדר autoבמקום לגובה מבוקש.
אנימציה זו מראה כיצד נראות האפשרויות:
עכשיו נשתמש גם justify-contentוגם align-items. זה יראה את ההבדל בין הצירים הראשיים לצירים הצולבים.
יישר עצמי
align-self מאפשר לך להתאים את היישור של אלמנט יחיד.
יש לו את כל אותם תכונות של align-items.
באנימציה הבאה, ל- div ההורה יש את ה- CSS align-items: centerו- flex-direction: row. שני הריבועים הראשונים עוברים דרך align-selfערכים שונים .
כיפוף גמיש
Flexbox כברירת מחדל ינסה להתאים את כל האלמנטים לשורה אחת. עם זאת, תוכל לשנות זאת עם flex-wrapהנכס. ישנם שלושה ערכים שבהם אתה יכול להשתמש כדי לקבוע מתי אלמנטים עוברים לשורה אחרת.
ערך ברירת המחדל הוא flex-wrap: nowrap. זה יביא לכך שהכל יישאר בשורה אחת משמאל לימין.
flex-wrap: wrap יאפשר לפריטים לעבור לשורה הבאה אם אין מספיק מקום בשורה הראשונה. הפריטים יוצגו משמאל לימין.
flex-wrap: wrap-reverse מאפשר גם לפריטים לקפוץ לשורה הבאה אך הפעם הפריטים מוצגים מימין לשמאל.
פלוס פלואו
flex-flowמשלב את השימוש flex-wrapואת flex-directionבנכס אחד. משתמשים בו על ידי הגדרת הכיוון תחילה ואז העטיפה. הנה דוגמה:flex-flow: column wrap;
יישר תוכן
align-contentמשמש ליישור פריטים עם מספר שורות. זה מיועד ליישור על ציר הצלב ולא ישפיע על התוכן שהוא קו אחד.
להלן אפשרויות: align-content: flex-start | flex-end | center | space-between | space-around | stretch;
מרכז אנכית באמצעות Flexbox
אם ברצונך למרכז אנכית את כל התוכן בתוך אלמנט אב, השתמש בו align-items. הנה הקוד לשימוש:
.parent { display: flex; align-items: center; }משחקים ואפליקציות
אם אתה רוצה לתרגל שימוש ב- flexbox, נסה את המשחקים והאפליקציות האלה שיעזרו לך לשלוט ב- flexbox.
- Flexbox Defense הוא משחק רשת בו אתה לומד flexbox תוך ניסיון לעצור את האויבים הנכנסים לעבור את ההגנות שלך.
- Flexbox Froggy הוא משחק שבו אתה עוזר לפרוגי וחברים על ידי כתיבת קוד CSS.
- Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
- Flexbox Patters is a website that shows off a bunch of Flexbox examples.
Conclusion
We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.