⭐ 0
🔍
טקסט תמונה PDF ומסמכים אודיו מוזיקה אלקטרוניקה זמן כלי עזר מאמתים אזוטרי משחקים

מחולל CSS Flexbox

בנה פריסת CSS flexbox באופן חזותי: flex-direction, justify-content, align-items, flex-wrap ו-gap על המכולה, ועוד flex-grow, flex-shrink ו-flex-basis לכל צאצא, הכול עם תצוגה מקדימה חיה ו-CSS בר-העתקה.

🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.

מעבד... 0%

תוצאה

לפריסת flexbox יש שני ספרי חוקים נפרדים — מאפיינים על המכולה (flex-direction, justify-content, align-items, flex-wrap, gap) ומאפיינים על כל צאצא (flex-grow, flex-shrink, flex-basis) — ולערבב ביניהם הוא המקור הנפוץ ביותר לבאגים של "למה זה לא ממרכז / גדל / עובר שורה כמו שאני מצפה". המחולל הזה שם את שני ספרי החוקים על המסך בבת אחת: שנה כל פקד מכולה או את השדות של כל צאצא ושלוש תיבות ממוספרות ומקודדות צבע מתעדכנות מיד, כך שהסיבה והתוצאה נשארות גלויות.

צד המכולה מכסה כל ציר פריסה: בחר כיוון, בחר כיצד הצאצאים מפוזרים לאורך הציר הראשי בעזרת justify-content, יישר אותם על הציר המשני, החלט אם הם עוברים שורה, וקבע gap במקום טריקים של שוליים ביניהם. צד הצאצא אמיתי באותה מידה: הוסף תיבות עד שמונה, הסר עד שתיים, ותן לכל אחת מהן flex-grow, flex-shrink ו-flex-basis משלה — המחולל מדפיס כלל CSS פר צאצא רק כאשר לפחות אחד מאלה שונה מברירת המחדל של הדפדפן, כך שהקוד המועתק לעולם לא מרפד את עצמו ב-flex-grow: 0 על תיבות שלא צריכות את זה.

עמודי קביעה מראש קופצים ישר לפריסות שאנשים באמת מחפשים לפי שם: איך למרכז div (השאלה הכי נשאלת בפריסת CSS, נפתרת עם justify-content ו-align-items שניהם מוגדרים ל-center), סרגל ניווט עם לוגו משמאל וקישורים מימין, עמודות גמישות ברוחב שווה באמצעות flex-grow, והשוואה זה לצד זה של space-between מול קרוביו space-around ו-space-evenly.

כמו כל כלי באתר זה, המחולל חינמי ורץ כולו בדפדפן שלך: בלי העלאה, בלי חשבון, והוא ממשיך לעבוד גם ללא חיבור לרשת ברגע שהדף נטען.

נהנים מהכלי? חושבים שהמוצר שימושי? רואים בו פוטנציאל ורוצים לתמוך?

🛡️
מבוצע בדפדפן

הקבצים והקלט שלכם לעולם לא עוזבים את המכשיר הזה. העיבוד רץ לגמרי לא מקוון. 100% מאובטח.

פורמטים וחוקים מקובלים

  • פקדי המכולה: flex-direction, justify-content, align-items, flex-wrap ושדה קלט ל-gap בפיקסלים, מיושמים על התצוגה המקדימה בזמן אמת.
  • שלוש תיבות צאצא מקודדות צבע כברירת מחדל (הוסף עד שמונה, הסר עד שתיים), לכל אחת שדות flex-grow, flex-shrink ו-flex-basis משלה.
  • בלוק CSS בר-העתקה עם כלל flex-container. בתוספת כלל .flex-item-N בודד לכל צאצא שיש לו מאפייני flex שאינם ברירת מחדל.

יתרונות מרכזיים

✓ כל פקד של המכולה והערכים flex-grow, flex-shrink ו-flex-basis של כל צאצא מעדכנים שלוש תיבות תצוגה מקדימה ממוספרות בזמן אמת, כך שאתה רואה בדיוק מה חוקי ה-flexbox שלך עושים לפני שנוגעים בגיליון סגנון.
✓ המחולל מדפיס רק חוקי צאצא שבאמת שונים מברירות המחדל של CSS, כך שהקוד המועתק נשאר קצר וקריא במקום לחזור על flex-grow: 0 על כל תיבה.
✓ עמודי קביעה מראש פותרים את הפריסות שאנשים מחפשים לפי שם: מרכוז div, סרגל ניווט עם לוגו משמאל וקישורים מימין, ועמודות גמישות ברוחב שווה — פתח אחד והכלי כבר מוגדר.

תרחישי שימוש

  • • קבל את קוד ה‑CSS המדויק למירכוז div אופקית ואנכית על־ידי צפייה בהשפעה של justify‑content ו‑align‑items על תיבות התצוגה המקדימה החיה.
  • • בנה פריסת סרגל ניווט עם לוגו משמאל וקישורים מימין באמצעות space‑between ו‑align‑items: center, ולאחר מכן העתק את קוד ה‑CSS של המכולה ישירות לרכיב הכותרת שלך.
  • • השווה את space‑between, space‑around ו‑space‑evenly זה לצד זה על אותן שלוש תיבות, במקום לנחש איזה מהן ישיג את המרווח הרצוי לך.