ملعب Flexbox التفاعلي
أتقن تقنية Flexbox من خلال التجربة المباشرة. عدل الخصائص واحصل على الكود فوراً.
خصائص الحاوية
Gap (المسافات)16px
1
2
3
كود CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
gap: 16px;
}
.item1 {
order: 0;
flex-grow: 1;
flex-shrink: 1;
}
.item2 {
order: 0;
flex-grow: 1;
flex-shrink: 1;
}
.item3 {
order: 0;
flex-grow: 1;
flex-shrink: 1;
}
مرجع سريع لـ Flexbox
justify-content
يتحكم في توزيع العناصر على المحور الرئيسي (أفقياً عادةً).
align-items
يتحكم في محاذاة العناصر على المحور المتقاطع (عمودياً عادةً).
flex-grow
يحدد قدرة العنصر على التمدد لملء المساحة المتاحة.
flex-wrap
يحدد ما إذا كانت العناصر يجب أن تلتف إلى سطر جديد أم لا.