הסבר על Flex - חלק 1
! ו-Enter למבנה סטנדרטי) וקובץ styles.css, ומקשרים אותו.container ובתוכו חמישה divים עם הטקסט "item number 1" עד 5. כברירת מחדל div הוא block element, ולכן הפריטים מוצגים אחד מתחת לשני.div, section או article.display: flex על הקונטיינר. הפריטים עוברים מיד להיות זה ליד זה.flexbox היא גרסה ישנה שלא משתמשים בה. flex מגדיר את הקונטיינר עצמו כ-block element, ו-inline-flex כ-inline element, כך שאפשר לשים כמה קונטיינרים באותה שורה.display: flex · display: inline-flexפרקי ההרצאה: הסבר על Flex - חלק 1
תמלול ההרצאה: הסבר על Flex - חלק 1
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Flex - חלק 1» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בעולם ה-HTML 5 ו-CSS 3 יש לנו משהו מעניין שנקרא פלקס ויש לנו משהו מעניין שנקרא גריד. אנחנו רוצים לראות מה זה בעצם פלקס ומה זה גריד. כמובן נחלק את זה למספר סרטונים.
פלקס זה היכולת של CSS לטפל בסדרת פריטים שנמצאים בשורה אחת או בעמודה אחת. בצורה פשוטה ונקייה. גריד זה היכולת של CSS לטפל בסדרת פריטים שנמצאים בדו מימד.
אם לדוגמה יש לי סדרה של פריטים בשורה, נניח אני רוצה סדרה של תמונות, סדרה של אייקונים, ואני רוצה לסדר אותם ככה, או שאני רוצה שחלק מהם ילכו לצד הזה וחלק לצד הזה, או שאני רוצה שהם יהיו בדיוק שווים וכולי וכולי, אז היכולת של CSS לטפל בזה נקראת פלקס.
אם יש לנו סדרה של פריטים אבל שהם נמצאים בדו מימד, כלומר יש לנו כאן פריט אחד ויש לנו פה איזה משהו ויש לנו כאן איזה משהו ויש לנו פה איזה משהו וכולי, יש לי פה דו מימד של פריטים אז בשביל להציב אותם בדיוק כמו שאני רוצה היכולת הזאת נקראת גריד.
ואנחנו רוצים לראות תשלובת של html5 ביחד עם css3 איך אנחנו מתמודדים עם flex ואיך אנחנו מתמודדים עם grid.
מה בעצם היכולות האלה מספקות לנו, איך אנחנו עושים את זה. ואנחנו הולכים לעשות את זה על visual studio code. בואו ניגש ונפתח פה תיקייה חדשה.
אני אתחיל עם flex, מבצע select folder, נוסיף קובץ חדש, html סימן קריאה enter גורם לקובץ הזה להיות עם המבנה של ה html הסטנדרטי.
בואו ניקח styles.css ונשים כאן לינק css לסטיילס עכשיו הם מחוברים נשים אותם סייד ביי סייד מה שאני רוצה לעשות זה לגשת וליצור סדרת פריטים שנמצאים בשורה אחת בוא נניח שיש לי כאן איזה שהוא אזור בדף ניתן לו class container ויש לי סדרת פריטים בוא ניקח divים בתוך הקלאס ניתן לכל
אחד איזשהו טקסט אייטם number 1 בואו ניקח חמישה פריטים כאלה 2 3 4 5 ניקח אייטם number 2 ניקח אייטם 3 יש לנו כאן 4 יש לנו כאן 5 ובואו נניח שאפילו אני אעשה אותם לא כאלה סימטריים.
בואו נראית שורה כאן וכאן. נריץ את זה ונראה מה בעצם נוצר לנו פה. והנה אנחנו רואים שיש לנו סך הכל את הפריטים בצורה כזאת של אחד מתחת לשני כי div היא בלוק אלמנט וזה אומר שהיא מתפרסת על כל השורה שהיא יכולה ולא מאפשרת לרכיבים אחרים להיות איתה ביחד בשורה.
אז זאת הסיבה שאנחנו מקבלים את זה. בואו ניגש וניתן כאן סדרת הגדרות שהן לא קשורות לפלקס ואני אקרא לזה General Styling. לא, בלי קשר ליכולות שאנחנו הולכים לראות, בואו נגיד שה-Container ניתן לו Height 150 פיקסלים, ניתן לו איזשהו Border, ניתן לו איזשהו Background כאחווית.
והנה אנחנו רואים בדיוק מה זה אומר. בנוסף בוא נניח שניגש לכל דיו וניתן לו טקסט אליין סנטר ניתן פונט סייז אקסטרה לארג' נעשה פה איזה ריווח מסוים גם כאן ניתן בורדר אחד פי אקס סוליד בלאק אפאם ואיזה שהוא באק גראונד קולור ניקח טו קיז.
והנה אנחנו רואים את הפריטים עצמם אחד מתחת לשני כי כל פריט הוא באמת דיו נפרד לגמרי. אוקיי, מכאן אנחנו רוצים להיכנס עם היכולות של פלקס.
ושוב, פלקס כל מה שהוא מאפשר לעשות זה להציג או לשלוט יותר נכון על סדרת פריטים שנמצאים בקונטיינר. כלומר סדרה יחידה של פריטים לא דו-ממד חד-ממד או שורה של פריטים או עמודה של פריטים.
כדי שאני אוכל לסדר אותם בכל מיני וריאציות אבל בצורה הכי נקייה שאפשר. כי לפני פלקס זה היה מאוד מעיק והמון קוד והמון הגדרות שונות שהיינו צריכים לתת להם בשביל לעשות כל מיני דברים, בשביל שהם יהיו בדיוק עם מרווחים מסוימים אחד בין השני.
באה הטכנולוגיה של פלקס ואומרת בצורה ממש פשוטה, אתם יכולים לשלוט בהם. אז איך זה מתבצע? הדבר הראשון שאנחנו צריכים להבין ושכאשר אנחנו מתעסקים בטכנולוגיה הזאת של פלקס יש שני דברים שאנחנו צריכים להתייחס אליהם אחד זה קונטיינר והשני זה הפריטים בתוך הקונטיינר אנחנו לא יכולים להגדיר הגדרות רק
לפריטים עצמם זה בא ביחד חלק מההגדרות שאנחנו נותנים ניתנות לקונטיינר עצמו במילים אחרות התגית שעוטפת את כל הפריטים וחלק מההגדרות זה לפריטים עצמם. עכשיו, הפריטים לא חייבים להיות דיו, זה יכול להיות רשימת תמונות, זה יכול להיות רשימת תיבות טקסט, זה יכול להיות רשימת לינקים, ולא משנה מה,
אלה הפריטים. גם הקונטיינר, הוא לא חייב להיות סקשן, הקונטיינר יכול להיות דיו, הוא יכול להיות ארטיקל, הוא יכול להיות פסקה, לא משנה, מה שבא לי שיהיה קונטיינר.
בדרך כלל הקונטיינר זה דיו או סקשן, והפריטים עצמם יכולים להיות כל מה שבא לי שנמצא בתוך אותו דיו או סקשן. אז מה? פקודה ראשונה, בואו נגיד מפה אנחנו כבר מתעסקים עם פלקס, הפקודה הראשונה ניתנת לקונטיינר והיא בכל מקרה חייבת להיות קונטיינר וכל מה שאני אומר דיספלי פלקס,
זאת הפקודה הראשונה. ברגע שעשינו את זה, בואו נסתכל רגע מה קיבלנו, כל הפריטים מסודרים מיידית אחד ליד השני, זאת אומרת שאוטומטית הם הפכו מבלוק אלמנט לאינליין אלמנט.
אינליין אלמנט אומר כל פריט תופס כמה שהוא צריך מבחינת התוכן שיש בתוכו וכל פריט מאשר לפריטים אחרים להיות איתו באותה השורה.
כל הפריטים עצמם נהיו אינליין אלמנט. עכשיו ראינו שהיה פה גם פלקס בוקס. פלקס בוקס זה פשוט גרסה