בדיקה וניפוי באגים בפריסות Flexbox של CSS

Jecelyn Yeen

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

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

לגלות את Flexbox בשירות CSS

כשמגדירים display: flex או display: inline-flex לרכיב HTML בדף, מופיע לידו תג flex בחלונית Elements.

שינוי הפריסה באמצעות עורך Flexbox

אפשר לשנות את הפריסות של flexbox באופן חזותי באמצעות העורך של flexbox. לדוגמה, כך אפשר למרכז את הטקסט <h1> של דף ההדגמה בתוך המאגר <div class="container">.

1. בודקים את רכיב הקונטיינר.
2. בחלונית Styles מופיע הלחצן flexbox editor לצד ההצהרה display: flex.
3. לוחצים עליו כדי לפתוח את הכלי לעריכת Flexbox. בעורך מוצגת רשימה של מאפייני Flexbox. אפשרויות הערך של כל מאפיין מוצגות כלחצני סמלים.
4. כדי למקם את הטקסט במרכז המסך, אפשר ללחוץ על הלחצנים justify-content: center ו-align-items: center.
5. הטקסט ממורכז עכשיו. שימו לב שההצהרות justify-content: center ו-align-items: center נוספות בחלונית Styles.

בדיקת הפריסה של Flexbox

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

לחלופין, אפשר ללחוץ על התג כדי להציג או להסתיר את שכבת-העל של Flexbox.

כדאי לנסות לשנות את הערך ל-justify-content: flex-end. שכבת-העל משתנה בהתאם.

הסמלים בכלי לעריכת גמישות מבוססים על ההקשר. הוא ישתנה בהתאם לכיוון הפריסה. לדוגמה, כשמשנים את הערך flex-direction לערך column, הסמלים בכלי לעריכת גמישות מסתובבים בהתאם. גם שכבת-העל מתעדכנת באופן מיידי.

שינוי הצבע של שכבת-העל של Flexbox

פותחים את החלונית פריסה וגוללים למטה אל הקטע Flexbox. כאן אפשר לראות את כל רכיבי ה-flexbox בדף.

אפשר להציג או להסתיר את שכבת-העל של כל רכיב Flexbox באמצעות תיבת הסימון שלצדו. זהו אותו תהליך כמו לחיצה על badge בעץ ה-DOM.

מלבד זאת, ניתן לשנות את הצבע של שכבת-העל על ידי לחיצה על סמל הצבע שלצידה. לדוגמה, הצבע של שכבת-העל container משתנה לשחור.

כדי לעבור לרכיב של Flexbox בעץ ה-DOM, אפשר ללחוץ על סמל הבורר שלידו.