CSS3 Flexbox
صناديق مرنة، أو flexbox ، هو وضع تخطيط جديد في CSS3.
استخدام flexbox يضمن أن عناصر تتصرف كما هو متوقع عند تخطيط الصفحة يجب استيعاب أحجام مختلفة للشاشة وأجهزة العرض المختلفة.
للعديد من التطبيقات، ويقدم نموذج الصندوق مرونة تحسنا بالمقارنة مع النموذج كتلة من حيث أنه لا يستخدم العوامات، ولا الحاوية المرن في انهيار هوامش مع هامش محتوياته.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل هذه الميزة.
أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox المفاهيم
Flexbox يتكون من حاويات المرنة والمواد المرنة.
أعلن وعاء المرن عن طريق تعيين display خاصية عنصر إما flex (المقدمة ككتلة) أو inline-flex (كما تصدر مضمنة).
داخل حاوية فليكس هناك واحد أو أكثر من العناصر المرنة.
ملاحظة: يتم تقديم كل شيء خارج وعاء المرن وداخل عنصر المرن كالمعتاد. تعرف حول flexbox كيف البنود العطف وضعت داخل حاوية المرن.
يتم وضع العناصر المرنة داخل حاوية المرن على طول خط المرن. افتراضيا هناك خط المرن واحد فقط لكل حاوية المرن.
يوضح المثال التالي ثلاثة بنود المرن. متوضعة بشكل افتراضي: على طول خط المرن الأفقي، من اليسار إلى اليمين:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>ومن الممكن أيضا لتغيير اتجاه خط المرن.
إذا وضعنا في direction الملكية ل rtl (من اليمين إلى اليسار)، ويوجه النص من اليمين إلى اليسار، وكذلك خط المرن يتغير الاتجاه، والتي سوف تغير تخطيط الصفحة:
مثال
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} اتجاه المرن
و flex-direction الخاصية تحديد اتجاه العناصر المرنة داخل الحاوية المرن. القيمة الافتراضية flex-direction هو row (من اليسار إلى اليمين، من أعلى إلى أسفل).
القيم الأخرى هي كما يلي:
-
row-reverse- إذا تركت الكتابة في الوضع (الاتجاه) إلى اليمين، سيتم وضع البنود المرن من اليمين إلى اليسار -
column- إذا كان نظام الكتابة الأفقية، سيتم وضع البنود المرن من عموديا -
column-reverse- نفس العمود ولكن عكس
يظهر المثال التالي نتيجة استخدام row-reverse القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام column القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام column-reverse القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} الملكية تبرير المحتوى
ل justify-content الملكية محاذاة أفقيا العناصر الحاوية مرنة عندما كانت العناصر لا يستخدم كل المساحة المتوفرة على المحور الرئيسي.
القيم الممكنة هي كما يلي:
-
flex-start- القيمة الافتراضية. يتم وضع العناصر في بداية الحاوية -
flex-endتتمركز عناصر في نهاية الحاوية - -
centerيتم وضع الأصناف في وسط الحاوية - -
space-between- يتم وضع العناصر ذات مساحة بين السطور -
space-aroundتتمركز عناصر مع الفضاء من قبل، بين، وبعد خطوط -
يظهر المثال التالي نتيجة استخدام flex-end القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام center القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام space-between القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام space-around القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} والبنود محاذاة الملكية
و align-items الملكية محاذاة عموديا العناصر الحاوية مرنة عندما كانت العناصر لا يستخدم كل المساحة المتوفرة على المحور العرضي.
القيم الممكنة هي كما يلي:
-
stretch- القيمة الافتراضية. وامتدت البنود لتتناسب مع حاوية -
flex-startفي وضع الأصناف في قمة الحاوية - -
flex-endيتم وضع الأصناف في قاع الإناء - -
center- يتم وضع الأصناف في وسط الحاوية (عموديا) -
baselineيتم وضع الأصناف في الأساس من الحاوية -
يظهر المثال التالي نتيجة استخدام stretch قيمة (هذه هي القيمة الافتراضية):
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام flex-start القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام flex-end القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام center القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام baseline القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} الملكية المرن الختامية
و flex-wrap الخاصية تحديد ما إذا كانت العناصر المرنة يجب التفاف أو لا، إذا لم تكن هناك مساحة كافية لهم على خط المرن واحد.
القيم الممكنة هي كما يلي:
-
nowrap- القيمة الافتراضية. وسوف البنود مرنة لا التفاف -
wrap- إن عناصر مرنة التفاف إذا لزم الأمر -
wrap-reverse- إن عناصر مرنة التفاف، إذا لزم الأمر، في ترتيب عكسي
يظهر المثال التالي نتيجة استخدام nowrap قيمة (هذه هي القيمة الافتراضية):
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام wrap القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} يظهر المثال التالي نتيجة استخدام wrap-reverse القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} خاصية محاذاة المحتوى
و align-content الملكية بتعديل سلوك flex-wrap الممتلكات. وهو مشابه ل align-items ، ولكن بدلا من التوفيق بين العناصر المرنة، فإنه ينسجم خطوط المرن.
القيم الممكنة هي كما يلي:
-
stretch- القيمة الافتراضية. خطوط تمتد لتولي المساحة المتبقية -
flex-startمعبأة خطوط نحو بداية حاوية فليكس - -
flex-endمعبأة خطوط في نهاية الحاوية فليكس - -
centerمعبأة خطوط باتجاه وسط الحاوية فليكس - -
space-betweenتوزع خطوط بالتساوي في حاوية فليكس - -
space-around- يتم توزيع خطوط بالتساوي في حاوية المرن، مع مسافات نصف الحجم على حد سواء
يظهر المثال التالي نتيجة استخدام center القيمة:
مثال
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} خصائص العنصر المرن
تنظيم
و order تحدد الخاصية ترتيب عنصر المرونة بالنسبة لبقية العناصر المرنة داخل نفس الحاوية:
مثال
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} هامش
وضع margin: auto; واستيعاب مساحة إضافية. ويمكن استخدامه لدفع العناصر المرنة في المواقف المختلفة.
في المثال التالي وضعناها margin-right: auto; في أول عنصر المرن. وهذا سوف يسبب كل المساحة الإضافية التي سيتم استيعابها في حق هذا العنصر:
مثال
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} الكمال توسيط
في المثال التالي سنقوم حل مشكلة شبه يومية: تمركز مثالي.
فمن السهل جدا مع حول flexbox. وضع margin: auto; وجعل هذا البند تركز تماما في كل محور:
مثال
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} محاذاة الذاتي
في align-self الملكية من العناصر المرنة يتجاوز البنود محاذاة حاوية المرن في الخصائص لهذا العنصر. أنه يحتوي على نفس القيم الممكنة مثل align-items الممتلكات.
يقوم المثال التالي قيم مختلفة محاذاة الذاتي إلى كل عنصر المرن:
مثال
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} ثني
و flex تحدد الخاصية طول البند المرن، نسبة إلى بقية العناصر المرنة داخل نفس الحاوية.
في المثال التالي، فإن البند الأول المرن تستهلك 2/4 من المساحة الحرة، وسوف البندين المرن أخرى تستهلك 1/4 من المساحة الحرة كل من:
مثال
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
المزيد من الأمثلة
إنشاء موقع على شبكة الانترنت تستجيب مع حول flexbox
يوضح هذا المثال كيفية إنشاء تصميم موقع الويب تستجيب مع حول flexbox.
خصائص CSS3 حول flexbox
يسرد الجدول التالي خصائص CSS استخدامها مع حول flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| 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 |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |