מגרש משחקים ל-Flexbox

כל הכלים

התנסה במאפייני Flexbox של CSS על פריטים חיים והעתק את קוד ה-CSS של הפריסה שנוצר.

תצוגה מקדימה לחץ על פריט כדי לערוך אותו
CSS שנוצר
—

הכול פועל בדפדפן שלך — שום דבר לא מועלה.

מכל
12px
פריטים
0
פריט נבחר

אודות מגרש משחקים ל-Flexbox

Flexbox Playground הוא ארגז חול מעשי ל-CSS flexbox. קבעו את תכונות המיכל — flex-direction, flex-wrap, justify-content, align-items, align-content ו-gap — וצפו כיצד עד 12 פריטים חיים משנים סידור בתצוגה המקדימה עם כל שינוי ערך. זו הדרך המהירה ביותר להפנים מה בדיוק כל תכונה עושה.

הפריטים ניתנים לעריכה אישית: לחצו על פריט כדי לבחור בו וכווננו את flex-grow, flex-shrink, flex-basis, align-self ו-order שלו. לראות פריט אחד גדל כדי לבלוע שטח פנוי בעוד אחיו שומרים על רוחבם מלמד את מודל גודל ה-flex מהר יותר מכל תרשים.

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

כיצד להשתמש ב-מגרש משחקים ל-Flexbox

  1. קבעו את flex-direction, wrap, justify-content, align-items, align-content ו-gap של המיכל.
  2. הוסיפו או הסירו פריטים — בין 2 ל-12 — כדי לשקף את הרכיב האמיתי שלכם.
  3. לחצו על פריט וכווננו את grow, shrink, basis, align-self ו-order שלו.
  4. צפו בתצוגה המקדימה החיה מתעדכנת עם כל שינוי.
  5. העתיקו את קוד ה-CSS שנוצר והדביקו אותו בפרויקט שלכם.

שאלות נפוצות

flex-grow מחלק שטח פנוי שנותר: פריט עם grow 2 מקבל פי שניים שטח נוסף מפריט עם grow 1. flex-shrink פועל בכיוון ההפוך כשהשטח מצומצם. שניהם יחסים בין אחים, לא גדלים מוחלטים.

align-items ממקם פריטים לאורך הציר הרוחבי בתוך השורה שלהם. align-content מרווח כמה שורות עטופות בתוך המיכל — יש לו השפעה נראית רק כאשר flex-wrap יוצר יותר משורה אחת.

ברירת המחדל של כל פריט flex היא order 0; הפריטים מסודרים מהערך הנמוך ביותר לגבוה ביותר. שינוי ה-order של פריט מזיז אותו חזותית בלי לגעת ב-HTML — סדר ה-DOM, ולכן סדר קורא המסך, נשאר זהה.

כן. ה-CSS שנוצר כולל את כללי המיכל בתוספת בורר לכל פריט שה-grow, shrink, basis, align-self או order שלו שונה מברירת המחדל, כך שתוכלו להדביק פריסה שלמה ופועלת.

כן — חינמית, ללא הרשמה, ולחלוטין בצד הלקוח. הניסויים שלכם אף פעם לא עוזבים את לשונית הדפדפן.
שתף זאת
כלים קשורים
בונה חתימת אימייל עצב חתימת אימייל HTML מקצועית מ-30 תבניות, התאם אישית ושמור. חינם
אייקון ל-PNG המר Bootstrap Icons, Font Awesome ועוד לתמונות PNG מותאמות אישית — בחינם, בדפדפן שלך. חינם
מחולל אייקוני אפליקציה צור סט אייקוני אפליקציה שלם ומוכן לחנות עבור App Store ו-Google Play — גרדיאנט פרימיום, רקעי mesh ותבניות, נבנה מהלוגו שלך. חינם
מחולל Favicon בנה חבילת favicon שלמה מלוגו, אייקון גופן או מונוגרמה — favicon.ico, קובצי PNG מודרניים, אייקון Apple touch, אייקוני PWA, מניפסט ווב וקטע HTML. חינם
מחולל CSS Box Shadow צור box-shadows מרובדות ב-CSS עם מחוונים חיים לזז, טשטוש, פיזור, צבע, אטימות ו-inset — תצוגה מקדימה על אלמנט אמיתי והעתק CSS מוכן להדבקה מיידית. חינם
מחולל CSS Border Radius עצב border-radius של CSS באופן חזותי עם תצוגה מקדימה חיה והעתק קוד מוכן לייצור. חינם
חיפושים פופולריים
flexbox playground מחולל css flexbox מחולל flex container כלי justify-content align-items מחולל פריסת flex css ויזואליזציה של flexbox מחולל קוד flexbox
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.