حاوية CSS فليكس
العنصر الأصلي (حاوية)
كما حددنا في الفصل السابق ، هذه حاوية مرنة (المنطقة الزرقاء) بثلاثة عناصر مرنة :
1
2
3
تصبح الحاوية المرنة مرنة عن طريق ضبط displayالخاصية على
flex:
مثال
.flex-container {
display: flex;
}
خصائص الحاوية المرنة هي:
خاصية الاتجاه المرن
تحدد الخاصية في flex-directionأي اتجاه تريد الحاوية تكديس العناصر المرنة.
1
2
3
مثال
تكدس القيمة columnالعناصر المرنة عموديًا (من أعلى إلى أسفل):
.flex-container {
display: flex;
flex-direction: column;
}
مثال
تكدس القيمة column-reverseالعناصر المرنة عموديًا (ولكن من أسفل إلى أعلى):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
مثال
تكدس القيمة rowالعناصر المرنة أفقيًا (من اليسار إلى اليمين):
.flex-container {
display: flex;
flex-direction: row;
}
مثال
تكدس القيمة row-reverseالعناصر المرنة أفقيًا (ولكن من اليمين إلى اليسار):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
خاصية الالتفاف المرن
تحدد الخاصية ما flex-wrapإذا كان يجب التفاف العناصر المرنة أم لا.
تحتوي الأمثلة أدناه على 12 عنصرًا مرنًا ، لإثبات
flex-wrapالملكية بشكل أفضل.
1
2
3
4
5
6
7
8
9
10
11
12
مثال
تحدد القيمة wrapأن العناصر المرنة ستلتف إذا لزم الأمر:
.flex-container {
display: flex;
flex-wrap: wrap;
}
مثال
تحدد القيمة nowrapأن العناصر المرنة لن تلتف (هذا افتراضي):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
مثال
تحدد القيمة wrap-reverseأن العناصر المرنة ستلتف إذا لزم الأمر ، بترتيب عكسي:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
خاصية التدفق المرن
الخاصية هي flex-flowخاصية مختصرة لتعيين كل من الخصائص
flex-directionو
.flex-wrap
مثال
.flex-container {
display: flex;
flex-flow: row wrap;
}
خاصية تبرير المحتوى
تُستخدم justify-contentالخاصية لمحاذاة العناصر المرنة:
1
2
3
مثال
تقوم centerالقيمة بمحاذاة العناصر المرنة في وسط الحاوية:
.flex-container {
display: flex;
justify-content: center;
}
مثال
تقوم flex-startالقيمة بمحاذاة العناصر المرنة في بداية الحاوية (هذا افتراضي):
.flex-container {
display: flex;
justify-content: flex-start;
}
مثال
تقوم flex-endالقيمة بمحاذاة العناصر المرنة في نهاية الحاوية:
.flex-container {
display: flex;
justify-content: flex-end;
}
مثال
تعرض space-aroundالقيمة العناصر المرنة بمسافة قبل السطور ، وبينها ، وبعدها:
.flex-container {
display: flex;
justify-content: space-around;
}
مثال
تعرض space-betweenالقيمة العناصر المرنة مع وجود مسافة بين السطور:
.flex-container {
display: flex;
justify-content: space-between;
}
خاصية محاذاة العناصر
يتم align-itemsاستخدام الخاصية لمحاذاة العناصر المرنة.
1
2
3
في هذه الأمثلة ، نستخدم حاوية ارتفاعها 200 بكسل لإظهار
align-itemsالخاصية بشكل أفضل.
مثال
تقوم centerالقيمة بمحاذاة العناصر المرنة في منتصف الحاوية:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
مثال
تقوم flex-startالقيمة بمحاذاة العناصر المرنة أعلى الحاوية:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
مثال
تقوم flex-endالقيمة بمحاذاة العناصر المرنة أسفل الحاوية:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
مثال
تمد القيمة stretchالعناصر المرنة لملء الحاوية (هذا افتراضي):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
مثال
تقوم baselineالقيمة بمحاذاة العناصر المرنة مثل محاذاة خطوطها الأساسية:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
ملاحظة: يستخدم المثال حجم خط مختلفًا لإثبات محاذاة العناصر بواسطة الخط الأساسي للنص:
1
2
3
خاصية محاذاة المحتوى
يتم align-contentاستخدام الخاصية لمحاذاة الخطوط المرنة.
1
2
3
4
5
6
7
8
9
10
11
12
في هذه الأمثلة ، نستخدم حاوية بارتفاع 600 بكسل ، مع
flex-wrapضبط الخاصية على wrap، لتوضيح align-contentالخاصية بشكل أفضل.
مثال
تعرض space-betweenالقيمة الخطوط المرنة بمسافة متساوية بينها:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
مثال
تعرض space-aroundالقيمة الخطوط المرنة بمسافة قبلها وبعدها:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
مثال
تمد القيمة stretchالخطوط المرنة لتحتل المساحة المتبقية (هذا افتراضي):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
مثال
تعرض centerالقيمة الخطوط المرنة في منتصف الحاوية:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
مثال
تعرض flex-startالقيمة الخطوط المرنة في بداية الحاوية:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
مثال
تعرض flex-endالقيمة الخطوط المرنة في نهاية الحاوية:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
توسيط مثالي
في المثال التالي سنحل مشكلة نمط شائعة جدًا: تمركز مثالي.
الحل: عيّن كلاً من the justify-contentو align-itemsالخصائص إلى
center، وسيتم توسيط العنصر المرن تمامًا:
مثال
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
خصائص حاوية CSS Flexbox
يسرد الجدول التالي جميع خصائص CSS Flexbox Container:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |