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

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

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

1. 00:02

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

2. 00:23

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

3. 00:32

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

4. 01:03

   ובואו ניקח שתיים, ניקח שלוש. יש לי שלושה לינקים באתר ובגלל שהלינקים האלה הם אינליין אז אני רואה אותם אחד ליד השני.

5. 01:17

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

6. 01:40

   אז כל מה שאנחנו צריכים לעשות זה לבוא לפה ולומר ל-Nav, לקונטיינר שלהם, קודם כל Display/Plex/Valve ולא שינה כלום, מפני שאוטומטית הוא עושה את זה מעין אינליין אלמנט והם גם ככה אינליין אלמנט.

7. 01:58

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

8. 02:25

   זה קשור כמובן למרג'ין של פי אפף.