במדריך הזה מוסבר איך לגלות רכיבי Flexbox בדף, וגם איך לבדוק ולשנות את פריסות של Flexbox בחלונית Elements.
צילומי המסך שמופיעים במאמר הזה הם מדף האינטרנט הזה: מרכוז של רכיב טקסט באמצעות Flexbox.
לגלות את Flexbox בשירות CSS
כשמחילים את התג display: flex או display: inline-flex על רכיב HTML בדף, התג flex מופיע לידו בחלונית רכיבים.
שינוי הפריסה באמצעות עורך 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מתווספות בחלונית סגנונות.
בדיקת הפריסה של Flexbox
אפשר להעביר את העכבר מעל רכיב ה-Flexbox בחלונית רכיבים כדי להציג את הפריסה באופן חזותי. שכבת-העל מופיעה מעל הרכיב, כשהיא פרוסה בקווים מקווקווים כדי להראות את המיקום של התוכן והפריטים שלה.
לחלופין, אפשר ללחוץ על התג כדי להחליף את מצב התצוגה של שכבת-העל של Flexbox.
כדאי לנסות לשנות את הערך ל-justify-content: flex-end. שכבת-העל משתנה בהתאם.
הסמלים בעורך Flex הם מבוססי-הקשר. הוא ישתנה בהתאם לכיוון הפריסה. לדוגמה, כשמשנים את flex-direction ל-column, הסמלים בעורך גמישה מסובבים בהתאם. גם שכבת-העל מתעדכנת באופן מיידי.
שינוי הצבע של שכבת-העל של Flexbox
פותחים את החלונית פריסה וגוללים למטה אל הקטע Flexbox. כאן אפשר לראות את כל רכיבי הדף Flexbox.
אפשר להחליף את המצב של שכבת-העל של כל רכיב Flexbox עם תיבת הסימון שלצידה. הפעולה מתבצעת בדיוק כמו שלוחצים על badge בעץ DOM.
מלבד זאת, ניתן לשנות את הצבע של שכבת-העל על ידי לחיצה על סמל הצבע שלצידה. לדוגמה, הצבע של שכבת-העל container ישתנה לשחור.
כדי לעבור לרכיב של Flexbox בעץ ה-DOM, אפשר ללחוץ על סמל הבורר שלידו.