איך אני ממרכז div עם flexbox באמצעות הכלי הזה?

בחר בהגדרה המוכנה ממורכז בצורה מושלמת, אשר מגדירה justify-content: center ו-align-items: center על המכולה. לאחר מכן לחץ על העתק CSS והדבק אותו בגיליון הסגנונות שלך.

אילו מאפיינים של flexbox אני יכול לשנות?

ניתן להגדיר flex-direction, flex-wrap, justify-content, align-items, align-content ו-Gap. ניתן גם לשנות את מספר הפריטים מ-1 עד 10 ואת גובה התצוגה המקדימה.

איך אני רואה איך flex-grow עובד על פריט אחד?

לחץ על פריט בתצוגה המקדימה החיה כדי להפעיל עליו flex-grow: 1, ולחץ עליו שוב כדי להסיר זאת. קוד ה-CSS שנוצר כולל אז כלל .item:nth-child עבור אותו פריט.

האם יש הגדרות מוכנות התחלתיות, כמו סרגל ניווט או שורת כרטיסים?

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

למה נראה ש-align-content לא עושה כלום בתצוגה המקדימה?

align-content נכנס לפעולה רק כאשר הפריטים גולשים למספר שורות. בתצוגה המקדימה הוא מיושם רק כאשר wrap אינו nowrap, אז הגדר תחילה flex-wrap ל-wrap.

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

↔️

יוצר CSS Flexbox בחינם

נסו כיוון flex, עטיפה, justify ו-align בפריטים חיים — והעתיקו את ה-CSS.

פועל בדפדפן שלךללא הרשמה, ללא חלונות קופציםללא צורך בכניסהחינם לנצח

פועל לא-מקוון לאחר טעינה

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

הגדרות מראש

flex-direction

flex-wrap

justify-content

align-items

רווח: 12pxפריטים: 4גובה התצוגה המקדימה: 176px

עצה: לחץ על פריט בתצוגה כדי להפעיל או לכבות עליו flex-grow: 1.

תצוגה חיה

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

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

כיצד זה עובד

מגרש משחקים אינטראקטיבי של flexbox: החלף flex-direction, wrap, justify-content ו-align-items וצפה בעד 10 פריטים חיים מסודרים מחדש מיד. לחץ על כל פריט כדי לתת לו flex-grow: 1 וראה איך הוא תובע מקום. ה-CSS מתעדכן בזמן אמת, מוכן להעתקה לפרויקט שלך.