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