Rows with Flexbox · שורות עם Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · עמוד זה דורש דפדפן עדכני (תומך ב-SharedArrayBuffer). אנא עדכן את Chrome, Edge, Firefox או Safari לגרסה העדכנית ביותר.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
עברית
הנחתת תיבות בשורה
- ברירת מחדל, תיבות עומדות אחת מעל השנייה. לעיתים קרובות רוצים אותן צד לצד.
- Flexbox היא הדרך הקלה לעשות זאת.
- הוסף
display: flex;ל-מיכל — התיבה שמכילה את האחרות — והילדים שלה יתארגנו בשורה.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
עברית
הפרידה ביניהן
- לאחר שהתיבה נמצאת ב-
display: flex;, אתה מבקר איך הילדים שלה מתפזרים. justify-content: space-between;דוחף אותם הרחק, עם רווחים ביניהם.gap: 12px;מוסיף מרווח אחיד בין כל ילד.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
עברית
טעויות נפוצות
display: flexנמצא על המיכל, ולא על הפריטים.justify-contentמפריד פריטים לאורך השורה.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
עברית
כעת תנסו בעצמכם
display: flexמופיע על המיכל, לא על הפריטים.- המר את הקופסה לשורה, ואז פרוס את הילדים שלה.
Explore · חקור
Flexbox lays out a row · Flexbox מסדר שורה
justify-content spaces items along the row; align-items across it. · justify-content מפצל פריטים לאורך השורה; align-items בצורה האנכית עליה.
Put the three boxes side by side. Add display: flex; to the .row rule. · הנח את שלושת הקופסאות זה לצד זה. הוסף display: flex; לכלל .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · פיזר את הקופסאות באופן שווה לאורך השורה. הוסף justify-content: space-between; לכלל .row.