.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}מהו מחולל Flexbox?
מחולל Flexbox הוא מגרש משחקים חזותי עבור פריסת קופסה גמישה של CSS. אתה מגדיר את מאפייני המיכל עם כפתורים ומחוונים, צופה בתצוגה מקדימה חיה מסדר מחדש את הפריטים בזמן אמת, ומעתיק את ה-CSS המדויק שבו משתמשת התצוגה המקדימה. זה מסיר את הניחוש מלזכור איזה מאפיין עושה מה, כך שתוכל לבנות שורה, עמודה, פריסה מרוכזת או רשת עטיפה של כרטיסים ללא ניסוי וטעייה בכלי הפיתוח של הדפדפן.
Flexbox הוא מודל פריסה חד מימדי: פריטים מונחים לאורך ציר ראשי ומיושרים על הציר הצולב המיכל מניע כמעט הכל דרך שישה מאפיינים כיוון גמיש בוחר את הציר הראשי והאם הוא רץ קדימה או אחורה. justic-content מחלק שטח פנוי לאורך הציר הראשי. align-items ממקם פריטים על הציר הצולב. flex-wrap מחליט אם פריטים עולים על גדותיהם על קווים חדשים, ומיישר-תוכן מרווח את הקווים הללו זה מזה ברגע שהעטיפה פועלת. פער מוסיף מרווח עקבי בין פריטים ללא שוליים.
כלי זה חושף את כל המאפיינים הללו במקום אחד ומציג את התוצאה באופן מיידי מכיוון שהתצוגה המקדימה מוצגת עם אותן הצהרות המופיעות בתיבת הפלט, מה שאתה רואה זה בדיוק מה שאתה מקבל כשאתה מדביק את ה-CSS בגיליון הסגנונות שלך הכלל שנוצר מכוון למחלקת .container כברירת מחדל ומפרט רק את המאפיינים החשובים, כולל יישור תוכן רק כאשר העטיפה מופעלת, מכיוון שאין לו השפעה על שורה אחת.
הכל פועל כולו בדפדפן שלך אין הרשמה, שום דבר לא מועלה, והכלי ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף. זה שימושי באותה מידה כעזר למידה להבנת האינטראקציה בין מאפייני הגמישות וכדרך מהירה לייצר CSS מוכן לייצור. שנה את מספר פריטי התצוגה המקדימה, שנה את גודל המיכל בראשך וקרא את ההצהרה שמייצרת את היישור הרצוי, בין אם זה מרווח navbar עם מרווח בין או קטע גיבור המרוכז בצורה מושלמת בשני הצירים.
כיצד להשתמש ב-Flexbox Generator?
בחר כיוון ועטוף
בחר את הכיוון הגמיש והאם פריטים צריכים להתעטף על מספר שורות.
הגדר יישור
התאם את תוכן הצדקה בציר הראשי ויישר פריטים בציר הצלב עד שהתצוגה המקדימה תתאים לפריסה שלך.
מרווח מנגינה
הגדר את הפער בין הפריטים, וכאשר העטיפה מופעלת, את תוכן היישור שמרחיק את הקווים זה מזה.
העתק את ה-CSS
עדכוני הכלל שנוצרו בשידור חי העתק אותו בלחיצה אחת והדבק אותו בגיליון הסגנונות שלך.
תכונות מפתח
תצוגה מקדימה חיה
מיכל של פריטים לדוגמה זורם מחדש באופן מיידי כאשר אתה משנה מאפיינים, כך שאתה רואה את הפריסה לפני העתקת קוד כלשהו
כל נכס מיכל
תצוגת בקרה, כיוון גמיש, גלישת גמיש, הצדקה-תוכן, יישור-פריטים, יישור-תוכן ופער מלוח אחד
מה שאתה רואה זה מה שאתה מקבל
התצוגה המקדימה משתמשת באותן הצהרות כמו הפלט, כך שה-CSS המועתק מייצר בדיוק את הפריסה על המסך
פלט נקי ומינימלי
הכלל שנוצר מפרט רק מאפיינים משמעותיים ומשמיט תוכן יישור עד להפעלת העטיפה
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!