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;على الـ حاوية — الصندوق الذي يحتوي على Others — وسيترتب أبنائه في صف.
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.