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

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

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

1. 00:03

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

2. 00:36

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

3. 00:51

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

4. 01:08

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

5. 01:18

   היכולת הבאה זה גבהים שונים שאנחנו יכולים לתת לפריטים עצמם. Different heights. איך אנחנו עושים את זה? קונטיינר, אנחנו אומרים לו Align Items ונותנים לו את ה-Default Stretch.

6. 01:38

   זה מה שאנחנו רואים פה, זה ה-Default. אבל אם לא היינו נותנים לו stretch אלא היינו נותנים לו flex start שימו לב מה קורה הוא מוצמד להתחלה של כל פריט מבחינת גובה בואו נראה מה קורה אם אנחנו נותנים לו flex end הוא מוצמד לסוף של כל פריט של הקונטיינר ואם אנחנו נותנים לו center אז הוא מוצמד בדיוק למרכז והנה יש לנו אפשרות לקחת פריט ולשים אותו

7. 02:13

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

8. 02:27

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

9. 02:37

   אם אני רוצה שהיא תהיה שנייה, אני צריך ללכת ל-HTML, לגזור אותה ולשים אותה פה כמובן, ואז היא תהיה שנייה.

10. 02:45

    אתם רואים את זה? אייטם נאמבר 2 הופך להיות הראשון, אייטם נאמבר 1 הופך להיות של השני. נחזיר את זה.

11. 02:54

    יש לפלקס את היכולת לשלוט על האורדר ב-HTML, אפילו שב-HTML כתוב פה 1 ופה 2, שזה נקודה מאוד מעניינת. אז איך אנחנו עושים את זה? אנחנו באים ל-div nth child ואומרים לו בוא נניח 1, אורדר לך למקום השני ואנחנו רוצים לגשת בואו אולי נעשה את זה כאן שיהיה לי קצת מקום לכל היתר ואני רוצה לגשת לאנס צ'יילד 2 ולהגיד לו שהמיקום שלו הוא 1.

12. 03:32

    כלומר הפכתי בין 1 ל-2. עכשיו שימו לב איפה הם נמצאים פה נמצא 1 ופה נמצא 2 למרות שפה רציתי את 2 ופה רציתי את 1. תכף נטפל בזה הנה אייטם נמבר 2 הנה אייטם נמבר 1 הם התחלפו אבל לא נתתי הגדרות לאחרים ולכן יש את הבעיה הזאת אז בואו ניתן לכולם הגדרות אם אני