הסבר על Flex - חלק 2

תמלול ההרצאה: הסבר על Flex - חלק 2

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Flex - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:27

   אולי במציאות כדאי לרשום נקודה קונטיינר חץ דיב. זה אומר כל הדיבים שנמצאים רק בתוך הקונטיינר שלנו.

3. 00:36

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

4. 00:57

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

5. 01:29

   מה המצב בלי ההגדרה ואיך ההגדרה משפיעה על זה דבר נוסף שאולי כדאי לעשות זה לסדר את זה אולי בצורה כזאת.

6. 01:43

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

7. 02:22

   לכל אחד 20% זה אמת מידה זאת אומרת שכל אחד מהדיוים מקבל את אותה אמת המידה בדיוק אוקיי ומה יקרה אם אני אעבור לדיו ואני אתן לו נניח בוא ניקח דיו n child 3 זה בעצם הדיו הזה זה יהיה 1, 2, 3, ואני בא ל-div nth child 3 ואני אומר לו flex 2, לא 1. מה בעצם קרה כאן?

8. 02:57

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

9. 03:14

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

10. 03:26

    בואו נעשה אבל נה דברים. זה, פלט זה לפה. זה היה equal measurement, וזה non-equal measurement. non-equal measurement, הראשון מקבל אחד, ומישהו אחר מקבל אחרים.

11. 03:43

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

12. 04:06

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

13. 04:17

    אז כאן יש לי, לקונטיינר עצמו אני יכול להוסיף גם justify, שימו לב שזה ברמת הקונטיינר, justify-content.

14. 04:27

    מה אני רוצה, איך אני רוצה שה-content שלו יוצג? ה-default זה flex-start, מה שאתם רואים כאן שהוא מוצמד להתחלה, זה ה-default.

15. 04:37

    בואו ניתן לו, נוריד רגע את זה וניתן לו flex-end ואז אנחנו יכולים לראות שכל הפריטים העפים ימינה. נשכפל וניתן לו center ואז כל הפריטים עפים לאמצע.

16. 04:55

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

17. 05:10

    כל ההגדרות הקודמות לא קשורות ל-flex, זה רק צבעים, גדלים וכולי, בורדר לא שייך לאיפה הפריטים נמצאים. בואו ניקח עכשיו במקום center בואו ניקח את space around שימו לב מה זה עושה זה שם תור