כתבתי את ההצהרה display: flex יותר פעמים ממה שאני יכול לספור, ואני עדיין שוכח מדי פעם אם זה justify-content או align-items זה שולט בציר האנכי ברציפות. זו לא בורות; זו המציאות הכנה של מודל פריסה שהתנהגותו מתהפכת בהתאם flex-direction. כאשר הכיוון הוא row, justify-content עובד אופקית. Switch to column ואותו מאפיין עובד עכשיו אנכית כל מי שטוען שהוא אף פעם לא פותח את כלי הפיתוח של הדפדפן כדי לדחוף את הערכים האלה עד שהקופסאות נוחתות איפה שהוא רוצה שוכב או שיש לו זיכרון הרבה יותר טוב משלי.
ה מחולל Flexbox הוא הכלי שהלוואי שהיה לי כשלמדתי את המודל הזה, וזה שאני עדיין מושיט אליו כשאני רוצה ליצור אב טיפוס של פריסה מבלי לגעת בגיליון סגנונות. אתה מגדיר את מאפייני המיכל, שורה של תיבות לדוגמה זורמת מחדש בזמן אמת, וה-CSS המדויק שמייצר את מה שאתה רואה יושב בתיבה מוכנה להעתקה מתחת. זה הופך את "זכור איזה נכס עושה מה" לתוך "לחץ עד שהוא נראה נכון, ואז קרא את התשובה."
TL;DR: Flexbox הוא מודל פריסה חד מימדי. המיכל מניע אותו בשישה מאפיינים:
flex-direction,flex-wrap,justify-content,align-items,align-content, וgap. מחולל זה חושף את כולם, מציג תצוגה מקדימה חיה ופולט CSS נקי. מכיוון שהתצוגה המקדימה מציגה עם אותן הצהרות שהיא מוציאה, מה שאתה רואה זה בדיוק מה שאתה מדביק. זה פועל כולו בדפדפן שלך ללא הרשמה.
איזו בעיה פותר מחולל flexbox?
Flexbox הוא חזק בדיוק בגלל שהוא יחסי אתה מתאר כוונה (" להפיץ את הפריטים האלה עם רווח שווה ביניהם, " " מרכז את זה בשני הצירים") והדפדפן מחשב את הפיקסלים אבל מערכות יחסיות קשה להחזיק בראש שלך, כי ההשפעה של כל מאפיין תלוי במצב של האחרים. align-content לא עושה כלום עד פריטים לעטוף הציר הראשי וציר חוצה להחליף כאשר אתה משנה כיוון. space-between ו space-around נראים דומים עד שמשווים אותם זה לצד זה.
הדרך המהירה ביותר לבנות אינטואיציה למערכת יחסית היא לתפעל אותה ולצפות. גנרטור ממוטט את לולאת העריכה-שמור-רענון לאינטראקציה אחת: שנה נפתחת, ראה את התיבות זזות. לאחר עשר דקות עם תצוגה מקדימה חיה, המאפיין השולט בציר הצלב מפסיק להיות עובדה שאתה משנן והופך למשהו שאתה מרגיש. וכשסיימת לחקור, לא נשאר לך הערה נפשית לתמלל; ה-CSS העובד כבר נכתב עבורך.
באילו מאפיינים שולט המיכל?
Flexbox מפצלת אחריות בין המכולה לפריטים שלה המכולה מחליטה על הסידור הכולל, ושם מתמקד הגנרטור כי זה המקום שבו חיות רוב החלטות הפריסה הנה מה שכל נכס מכולה עושה.
| נכס | מה זה שולט | ערכים משותפים |
|---|---|---|
flex-direction |
הציר הראשי וכיוונו | row, column, row-reverse, column-reverse |
flex-wrap |
האם פריטים עולים על גדותיהם לקווים חדשים | nowrap, wrap, wrap-reverse |
justify-content |
מרווח לאורך הציר הראשי | flex-start, center, space-between, space-evenly |
align-items |
מיקום על ציר הצלב | stretch, center, flex-start, baseline |
align-content |
מרווח של קווים עטופים על הציר הצלב | stretch, center, space-between |
gap |
רווח בין פריטים | כל אורך, למשל 16px |
המודל המנטלי שעושה את המקל הזה הוא הרעיון הדו-צירי מהמפרט פריטים זורמים לאורך הציר הראשי, אשר flex-direction סטים הציר הצולב תמיד מאונך אליו. justify-content מחלק שטח על הציר הראשי; align-items מיקומים על הציר הצולב. פַּעַם flex-direction הוא column, הציר הראשי אנכי, אז justify-content כעת עורם פריטים מלמעלה למטה ו align-items ממקם אותם משמאל לימין שום דבר במאפיינים לא השתנה; הצירים הסתובבו מתחתיהם.
כיצד אוכל לרכז div עם flexbox?
זוהי שאלת flexbox המבוקשת ביותר, והתשובה היא שלוש שורות. הגדר את המיכל ל display: flex, אז justify-content: center ו align-items: center. זה מרכז את הילד על הציר הראשי והציר הצול בבת אחת, אשר עבור שורת ברירת מחדל פירושו מרכז מת אופקית ואנכית.
בגנרטור, אתה בוחר center עבור שני פקדי היישור ותיבות הדגימה קפצו לאמצע אזור התצוגה המקדימה. תיבת הפלט מציגה אז:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
הסיבה שהמתכון הזה שווה בנייה על ידי לחיצה במקום שינון היא שברגע שהדרישה שלך משתנה אפילו מעט, למשל אתה רוצה שהפריט יוצמד למעלה אבל מרוכז אופקית, אתה משנה נפתחת אחת ורואה את התוצאה, במקום לנחש איזה של שני המאפיינים לערוך.
מתי יש חשיבות לתוכן-יישור?
align-content האם הנכס אנשים להגדיר ולאחר מכן תוהה למה שום דבר לא קורה התשובה היא במפרט: זה משפיע רק פריסה כאשר יש שורות מרובות של flex פריטים.With flex-wrap: nowrap, כל פריט יושב על שורה אחת, כך שאין קבוצה של קווים לחלוקה, והמאפיין אינרטי.
המחולל מקודד את הכלל הזה כך שלא ניתן להטעות אותו. כאשר העטיפה כבויה, ה align-content השליטה מושבתת והמאפיין מושמט לחלוטין מה-CSS שנוצר. הפעל את העטיפה והיא הופכת לפעילה, ותוכל לראות אותה דוחפת את שורות הפריטים העטופים יחד או מפזרת אותם על הציר הצולב. פליטת המאפיין רק כאשר הוא עושה משהו שומרת על הפלט כנה: כל הצהרה בכלל המועתק היא כזו שיש לה השפעה גלויה על הפריסה שלך.
מה ההבדל בין ערכי justic-content?
ה justify-content מילות מפתח הן המקום שבו תצוגה מקדימה חיה מרוויחה את השמירה שלה, מכיוון שההבדלים הם מרחביים וקשה לתאר בפרוזה. flex-start אורז פריטים בתחילת הציר הראשי. center אורז אותם באמצע. space-between דוחף את הפריטים הראשונים והאחרונים לקצוות ומחלק את החלל הנותר באופן שווה בין האחרים, כך שאין רווח בקצוות החיצוניים. space-around נותן לכל פריט כמות שווה של רווח משני הצדדים, מה שאומר שהרווח בין שני פריטים כפול מהרווח בקצוות. space-evenly הופך כל פער לשווה, כולל הקצוות.
קריאת הפסקה הזו לא מלמדת אותך כמעט כלום לחיצה על חמשת הערכים עם חמש תיבות על המסך מלמדת אותך תוך שניות, ולעולם לא תבלבל space-between עם space-around שוב ברגע שראית את התנהגות הקצה זה לצד זה. זה הטיעון לבניית פריסה על ידי מניפולציה ולא על ידי שינון, וזה אותו טיעון מאחורי שמירה על קבוצה של כלי CSS חזותיים קרובים: ה מחולל גרדיאנט וה מחולל box-shadow קיימים מאותה סיבה, כי גם שיפועים וצללים קלים יותר לחיוג בעין מאשר לכתוב עיוור. המקרה הרחב יותר להרכבת ערכת כלים מסוג זה נמצא ביצירה זו על ערכת כלים למפתחי אינטרנט.
Flexbox או CSS Grid?
השאלה הזו עולה ללא הרף, והמסגור שמדובר בתחרות הוא הטעות.Flexbox הוא חד מימדי: הוא מניח פריטים לאורך ציר בודד, עוטף כשאומרים לו, והוא מצטיין בשורות של דברים שעל גודלם אתה רוצה שהדפדפן ינהל משא ומתן סרגלי כלים, סרגלי ניווט, קבוצות כפתורים ושורות כרטיסים הם עבודות flexbox טבעיות.CSS Grid הוא דו מימדי: הוא שולט בשורות ובעמודות יחד, והוא מצטיין במבנה ברמת העמוד שבו אתה רוצה מסלולים מפורשים.
בפרויקטים אמיתיים הם מקננים ללא הרף רשת מגדירה את אזורי הדף, ומיכל flex מסדר את הפריטים בתוך אחד מאותם אזורים לימוד flexbox ביסודיות אינו הופך את הרשת למיותרת ולהיפך; זה גורם לך לשלוט בכלי שמתאים לכל עבודה. גנרטור הוא דרך מהירה להגיע לשטף הזה עבור המקרה החד-ממדי, וברגע שמאפייני המיכל הם טבע שני, קריאה וכתיבה של פריסות גמישות ביד מפסיקה להזדקק להפניה.
כיצד אוכל להשתמש במחולל Flexbox?
הזרימה משקפת את האופן שבו אתה חושב על פריסה.
- בחר
flex-directionוהאם פריטים צריכים לעטוף. זה קובע את הצירים ואת התנהגות ההצפה, שתי ההחלטות שכל השאר תלוי בהן. - הגדר יישור. להתאים
justify-contentעל הציר הראשי וalign-itemsעל הציר הצולב עד שהתצוגה המקדימה תתאים לסידור בראש שלך. - מרווח מנגינות. הגדר את
gapבין פריטים עם המחוון, וכאשר העטיפה מופעלת, הגדרalign-contentלרווח הקווים. - העתק את ה-CSS. הכלל שנוצר מכוון ל-a
.containerשיעור ועדכונים בשידור חי העתק אותו בלחיצה אחת והדבק אותו בגיליון הסגנונות שלך.
באפשרותך גם להוסיף או להסיר פריטי תצוגה מקדימה כדי לבדוק כיצד מתנהגת פריסה תחת תוכן שונה. א space-between navbar נראה בסדר עם שלושה פריטים ושונה מאוד עם שבעה שעוטפים, והיכולת לשנות את הספירה תוך כדי צפייה היא איך אתה תופס את זה לפני שהוא מגיע לייצור.
האם פער מחליף שוליים למרווחים?
לרוב, כן, וזה שיפור אמיתי. Before gap נתמך במיכלים גמישים, מרווח פריטים פירושו הוספת שוליים לכל ילד ולאחר מכן להילחם בשוליים הנוספים על הראשון או האחרון, בדרך כלל עם א :last-child עקיפה או מרווח שלילי על ההורה. gap מגדיר את הרווח בין הפריטים ישירות, חל גם בין קווים עטופים, ואינו מוסיף דבר בקצוות החיצוניים, כך שכל המחלקה של באגים בשולי הקצה נעלמת.
הגנרטור מטפל gap כפקד ממדרגה ראשונה עם מחוון פיקסלים, והוא משמיט את ההצהרה כאשר הפער הוא אפס כך שהפלט נשאר מינימלי לעבודת ייצור, gap על קונטיינרים flex נתמך היטב על פני הדפדפנים הנוכחיים, ולכן לעתים רחוקות יש סיבה להגיע בחזרה לגישת השוליים אם אתה ממיר ערך מרווח בין יחידות בזמן שאתה עובד, ה ממיר יחידת CSS מטפל ב px ל rem אריתמטיקה ללא מחשבון.
מהם הגבולות של ה-CSS שנוצר?
הגנרטור מייצר את כלל המכולה. זה לא מגדיר מאפיינים לכל פריט כמו flex-grow, flex-shrink, או flex-basis, השולטים כיצד פריטים בודדים מתרחבים ומתכווצים למילוי מקום. אלו החלטות ברמת הפריט התלויות בתוכן הספציפי שלך, ולרוב הפריסות מאפייני המיכל פלוס flex: 1 על הפריטים שאמורים לגדול זה כל מה שאתה צריך. כאשר אתה כן צריך שליטה עדינה לכל פריט, כלל המיכל שנוצר הוא עדיין הבסיס הנכון לבנות עליו.
הפלט משתמש סטנדרטי, unprefixed properties.Svendor קידומות עבור flexbox היו דרושים עבור דפדפנים כי הם שנים מתוך תמיכה, כך גיליון סגנונות מודרני לא צריך לשאת אותם, והוספת אותם היום הוא רעש.CSS שנוצר הוא ייצור-מוכן כפי שנכתב, וזה הנקודה: אתה עוזב עם כלל שאתה יכול להדביק, לא סקיצה התחלתית אתה צריך לסיים עבור קבוצה רחבה יותר של כלי עזר קטנים שהופכים את העבודה חזיתית מהר יותר, זה rundown של כלי פרודוקטיביות למפתחים הוא בן לוויה טוב, כמו גם ה מדריך מחולל גרדיאנט אם CSS חזותי הוא החלק שאתה רוצה להאיץ.
אילו פריסות נפוצות אני יכול לבנות עם זה?
קומץ מתכונים מכסים את רוב העבודה היומיומית flexbox, וכל אחד הוא כמה קליקים בגנרטור סרגל ניווט עם לוגו בצד שמאל וקישורים בצד ימין הוא justify-content: space-between עם align-items: center בשורה גיבור מרוכז בצורה מושלמת, הקלאסי "מרכז תיבה בדף," הוא justify-content: center ו align-items: center. ערימה אנכית של שדות צורה היא flex-direction: column עם א gap עבור מרווח עקבי, שהוא נקי יותר מאשר שוליים על כל שדה שורה מגיבה של כרטיסים שעוטפת שורות חדשות על מסכים צרים היא שורה עם flex-wrap: wrap וא gap, אז flex: 1 על הקלפים עצמם כך שהם גדלים למלא את השורה.
הערך של בניית אלה במחולל במקום להעתיק אותם מהזיכרון הוא שאתה רואה את מקרי הקצה מיד. א space-between navbar עם פריט אחד בלבד מצמיד את הפריט הזה להתחלה, שיכול להיראות כמו באג עד שתבין את זה space-between אין מה להפיץ עם פריט בודד שורת כרטיסי עטיפה מתנהגת אחרת בשני קלפים לעומת שישה, והתצוגה המקדימה 's ספירת פריטים מתכווננת מאפשרת לך לבדוק את שניהם לפני שאתה שולח. בניית הפריסה על ידי מניפולציה פירושה שהמקרים המפתיעים צצים בזמן שאתה עדיין בכלי, לא לאחר שמשתמש מדווח עליהם.
ברגע שמתכון נמצא באצבעותיך, אתה מפסיק להזדקק למחולל עבורו וכותב את חמש השורות ישירות. זה מצב הקצה הבריא. הכלי הוא מורה כמו מפיק: כל פריסה שאתה בונה על ידי לחיצה היא כזו שאתה מבין קצת יותר טוב בפעם הבאה שאתה כותב אותה ביד, וזה בדיוק איך כלי עזר ויזואלי טוב צריך להפוך את עצמו למיותר בהדרגה עבור היסודות תוך שמירה על שימושיות למקרים המטופשים.
שָׁוא
מהו מחולל CSS flexbox?
מחולל CSS flexbox הוא כלי ויזואלי המאפשר לך להגדיר מאפייני מיכל flex ולהעתיק את ה-CSS המתקבל. אתה מתאים את ה-justic-content, יישור פריטים, כיוון, עטיפה ופער, רואה תצוגה מקדימה חיה ומדביק את הכלל שנוצר בגיליון הסגנונות שלך.
כיצד אוכל לרכז div עם flexbox?
הגדר את המיכל כך שיציג: flex, ולאחר מכן justic-content: center and align-items: center.שמרכז את הפריטים הן על הציר הראשי והן על הציר הצולב בכלי זה, בחר מרכז עבור שני בקרות היישור והעתק את ה-CSS.
מה ההבדל בין להצדיק-תוכן ליישר-פריטים?
justic-content מפיץ פריטים לאורך הציר הראשי, שהוא אופקי עבור שורה ואנכי עבור עמודה. align-items ממקם פריטים על הציר הצלב, בניצב לציר הראשי. שינוי חילופי כיוון גמיש באיזה ציר כל אחד שולט.
מתי יש ליישור-תוכן השפעה?
תוכן יישור משפיע על הפריסה רק כאשר פריטים עוטפים על יותר מקו אחד, מכיוון שהוא מרחיק את הקווים הללו זה מזה על הציר הצולב. עם גלישת גמיש מוגדרת ל-nowrap יש קו בודד, כך שהמאפיין לא עושה דבר והכלי הזה משמיט אותו מהפלט.
מה עושה תכונת הפער ב-flexbox?
gap קובע רווח עקבי בין פריטים גמישים מבלי להוסיף שוליים לכל פריט. זה חל בין פריטים באותו קו ובין קווים עטופים, והוא מונע את בעיות שולי הקצה שיוצר מרווח מבוסס שוליים.
מה ההבדל בין flex ל-inline-flex?
תצוגה: flex הופך את המיכל לקופסה ברמת בלוק שלוקחת את מלוא הרוחב הזמין. display: inline-flex הופך אותו לקופסה ברמת inline שיושבת בזרימת הטקסט ורחבה רק כמו התוכן שלה, בעוד שניהם פורסים את ילדיהם עם אותם כללי flex.
האם flexbox מחליף את CSS Grid?
מס 'Flexbox הוא מודל חד מימדי להנחת פריטים לאורך ציר יחיד, אידיאלי עבור סרגלי כלים, ניווט, ושורות של כרטיסים.CSS Grid הוא דו מימדי עבור שורות ועמודות יחד הם משלימים ולעתים קרובות בשימוש באותה פריסה.
האם ה-CSS שנוצר בטוח לשימוש בייצור?
כן. Flexbox נתמך בכל דפדפן מודרני והכלי פולט מאפייני CSS סטנדרטיים ללא קידומת. כל העיבוד מתרחש בדפדפן שלך, כך ששום דבר לא מועלה והכלי עובד במצב לא מקוון לאחר הטעינה.
