במדריך הזה מוסבר איך לגלות רכיבי Flexbox בדף, וגם איך לבדוק ולשנות את פריסות של Flexbox בחלונית Elements.
צילומי המסך שמופיעים במאמר הזה הם מדף האינטרנט הזה: הצגת אלמנט טקסט במרכז באמצעות Flexbox.
מידע על Flexbox ב-CSS
כשמגדירים display: flex או display: inline-flex לרכיב HTML בדף, מופיע לידו תג flex בחלונית Elements.
שינוי פריסות באמצעות הכלי לעריכה של Flexbox
אפשר לשנות את הפריסה של Flexbox באופן חזותי באמצעות Flexiblebox Editor. לדוגמה, כך אפשר למרכז את הטקסט <h1> של דף הדגמה הזה בתוך המאגר שלו <div class="container">.
- בודקים את רכיב הקונטיינר.
- בחלונית Styles מופיע הלחצן flexbox editor לצד ההצהרה
display: flex.
- לוחצים עליו כדי לפתוח את הכלי לעריכת Flexbox. בחלונית העריכה תוצג רשימה של מאפייני Flexbox. אפשרויות הערך של כל מאפיין מוצגות כלחצני סמלים.
- כדי למרכז את הטקסט במסך, אפשר ללחוץ על הלחצנים
justify-content: centerו-align-items: center.
- עכשיו הטקסט ממוקם במרכז. שימו לב שההצהרות
justify-content: centerו-align-items: centerמתווספות בחלונית Styles.
בדיקת הפריסה של Flexbox
אפשר להעביר את העכבר מעל רכיב ה-Flexbox בחלונית רכיבים כדי להציג את הפריסה באופן חזותי. שכבת-העל מופיעה מעל הרכיב, כשהיא פרוסה בקווים מקווקווים כדי להראות את המיקום של התוכן והפריטים שלה.
לחלופין, אפשר ללחוץ על התג כדי להציג או להסתיר את שכבת-העל של Flexbox.
אפשר לנסות לשנות את הערך ל-justify-content: flex-end. שכבת-העל תשתנה בהתאם.
הסמלים בעורך Flex הם מבוססי-הקשר. הוא ישתנה בהתאם לכיוון הפריסה. לדוגמה, כשמשנים את הערך flex-direction לערך column, הסמלים בכלי לעריכת גמישות מסתובבים בהתאם. גם שכבת-העל מתעדכנת באופן מיידי.
שינוי הצבע של שכבת-העל של Flexbox
פותחים את החלונית פריסה וגוללים למטה לקטע Flexbox. כאן אפשר לראות את כל רכיבי הדף Flexbox.
אפשר להציג או להסתיר את שכבת-העל של כל רכיב Flexbox באמצעות תיבת הסימון שלצדו. זהו אותו תהליך כמו לחיצה על badge בעץ ה-DOM.
בנוסף, אפשר לשנות את הצבע של שכבת-העל בלחיצה על סמל הצבע שלידה. לדוגמה, הצבע של שכבת-העל container משתנה לשחור.
כדי לנווט לרכיב flexbox בעץ ה-DOM, אפשר ללחוץ על סמל הסלקטורים שלצידו.