دليل Flexbox الكامل

الأساسيات والمصطلحات

نظرًا لأن flexbox عبارة عن وحدة نمطية بأكملها وليست خاصية واحدة ، فهي تتضمن العديد من العناصر مع مجموعة من الخصائص. بعضها مصمم للتثبيت في حاوية (يسمى العنصر الأصل "حاوية مرنة") ، في حين أن البعض الآخر مخصص للتركيب في عناصر فرعية (ما يسمى "العناصر المرنة").

إذا كان التصميم "العادي" يعتمد على كلا الاتجاهين والمضمنة ، فإن التصميم المرن يعتمد على "اتجاهات التدفق المرن". يرجى إلقاء نظرة على هذا الرسم من المواصفات التي تشرح الفكرة الأساسية للتخطيط المرن.



ستوضع العناصر إما في اتجاه المحور الرئيسي ( المحور الرئيسي من البداية الرئيسية إلى النهاية الرئيسية ) أو في اتجاه المحور العرضي ( المحور المتقاطع من البداية المتقاطعة إلى النهاية المتقاطعة ).

• المحور الرئيسي - المحور الرئيسي للحاوية المرنة هو المحور الرئيسي الذي توجد عليه العناصر المرنة. كن حذرا ، هذا المحور ليس أفقيا بالضرورة. ذلك يعتمد على خاصية الاتجاه المرن (انظر أدناه).
• البداية الرئيسية | النهاية الرئيسية - توضع العناصر المرنة في الحاوية ، بدءًا من البداية الرئيسية وتنتهي بالنهاية الرئيسية.
• الحجم الرئيسي - عرض أو ارتفاع العنصر المرن ، وفقًا لما هو في البعد الرئيسي. يتم تحديده من خلال الحجم الرئيسي للعناصر المرنة ، أي خاصية "العرض" أو "الارتفاع" ، اعتمادًا على ما هو في البعد الرئيسي.
• محور متقاطع - المحور العمودي على المحور الرئيسي ، يسمى المحور العرضي. يعتمد اتجاهها على اتجاه المحور الرئيسي.
• عبر البدء | cross-end - تمتلئ الخطوط المرنة بالعناصر وتوضع في الحاوية ، بدءًا من ثني البداية المتقاطعة للحاوية باتجاه cross-end.
• الحجم المتقاطع - عرض أو ارتفاع العنصر المرن. اعتمادًا على خاصية css للاتجاه المرن ، هذا هو عرض أو ارتفاع العنصر. هذا هو دائمًا الحجم العرضي للعناصر المرنة.

خصائص الأصل (الحاوية المرنة)

عرض

.container { display: flex; /* or inline-flex */ } 

المرن الاتجاه

 .container { flex-direction: row | row-reverse | column | column-reverse; } 

• صف (افتراضي): من اليسار إلى اليمين في ltr ؛ من اليمين إلى اليسار في RTL
• عكس الصف من اليمين إلى اليسار ltr ؛ من اليسار إلى اليمين في rtl
• العمود : نفس الصف ولكن من أعلى إلى أسفل
• عكس العمود : نفس الشيء ، عكس الصف ولكن من أسفل إلى أعلى

المرن الختامية

 .container{ flex-wrap: nowrap | wrap | wrap-reverse; } 

• nowrap (افتراضي): جميع العناصر المرنة ستكون على نفس الخط
• التفاف : سيتم التفاف العناصر المرنة عدة أسطر من الأعلى إلى الأسفل.
• التفاف خلفي : سوف تقوم العناصر المرنة بلف عدة خطوط من الأسفل إلى الأعلى.

التدفق المرن (ينطبق على: العنصر الرئيسي للحاوية المرنة)

 flex-flow: <'flex-direction'> || <'flex-wrap'> 

تبرير المحتوى

 .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } 

• بداية مرنة (الافتراضي): يتم نقل العناصر إلى بداية اتجاه الاتجاه المرن.
• نهاية مرنة : يتم نقل العناصر أقرب إلى نهاية اتجاه المرن.
• بداية : يتم نقل العناصر إلى بداية اتجاه وضع الكتابة .
• end : يتم إزاحة العناصر في نهاية اتجاه وضع الكتابة .
• left : يتم تحويل العناصر باتجاه الحافة اليسرى من الحاوية ، إذا لم يكن ذلك منطقيًا في الاتجاه المعاكس ، فحينها يتصرف مثل البداية .
• right : يتم تحويل العناصر باتجاه الحافة اليمنى للحاوية ، إذا لم يكن ذلك منطقيًا في الاتجاه المرن ، فسيتصرف مثل البداية .
• مركز : العناصر تتركز على طول الخط
• المسافة بين : يتم توزيع العناصر بالتساوي على طول الخط ؛ العنصر الأول في بداية السطر ، العنصر الأخير في نهاية السطر
• مساحة حول : يتم توزيع العناصر بالتساوي على طول الخط مع نفس المساحة من حولهم. لاحظ أن المسافات لا تتساوى بصريًا ، لأن جميع العناصر لها نفس المساحة على كلا الجانبين. سيكون للعنصر الأول وحدة مساحة واحدة مقابل حافة الحاوية ، لكن وحدتين من الفضاء بين العنصر التالي ، لأن العنصر التالي له تباعد خاص به ، والذي ينطبق.
• مسافة بالتساوي : يتم توزيع العناصر بحيث تكون المسافة بين أي عنصرين (والمسافة إلى الحواف) هي نفسها.

محاذاة البنود

 .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } 

• التمدد (الافتراضي): التمدد لملء الحاوية (لا يزال يتم احترام العرض الأدنى / الحد الأقصى للعرض)
• flex-start / start / self-start : توضع العناصر في بداية المحور العرضي. الفرق بينهما صغير ويتضمن مراقبة قواعد الاتجاه المرن أو قواعد وضع الكتابة .
• نهاية مرنة / نهاية / نهاية ذاتية : يتم وضع العناصر في نهاية المحور العرضي. الفرق هو مرة أخرى خفية ومتوافق مع قواعد الاتجاه المرن أو وضع الكتابة .
• المركز : تتركز العناصر على المحور العرضي
• الأساس : تتم محاذاة العناصر وفقًا لخط الأساس

محاذاة المحتوى

 .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } 

• flex-start / start : تحولت العناصر إلى بداية الحاوية. تستخدم البداية المرنة الأكثر دعمًا الاتجاه المرن بينما تستخدم البداية اتجاه وضع الكتابة .
• فليكس نهاية / نهاية : العناصر تحولت إلى نهاية الحاوية. يستخدم الطرف المرن الأكثر دعمًا الاتجاه العكسي ، بينما تستخدم النهاية اتجاه وضع الكتابة .
• center : العناصر متمركزة في الحاوية
• المسافة بين : يتم توزيع العناصر بالتساوي ؛ السطر الأول في بداية الحاوية ، والأخير في النهاية
• مسافة حول : يتم توزيع العناصر بالتساوي مع مساحة متساوية حول كل صف
• الفضاء بالتساوي : يتم توزيع العناصر بالتساوي ، نفس المساحة من حولهم
• التمدد (الافتراضي): يتم تمديد الخطوط لتشغل المساحة المتبقية

خصائص العناصر الفرعية الأولى (العناصر المرنة)

ترتيب

 .item { order: <integer>; /* default is 0 */ } 

المرن ينمو

 .item { flex-grow: <number>; /* default 0 */ } 

المرن يتقلص

 .item { flex-shrink: <number>; /* default 1 */ } 

، أساس المرن

 .item { flex-basis: <length> | auto; /* default auto */ } 

انظر هذه الصورة.

ثني

 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

محاذاة الذاتي

 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 

أمثلة

 .parent { display: flex; height: 300px; /*    */ } .child { width: 100px; /*    */ height: 100px; /*    */ margin: auto; /* ! */ } 

 .flex-container { /*    flex  */ display: flex; /*    flex-direction        * ,       : * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /*   ,     */ justify-content: space-around; } 

 /*   */ .navigation { display: flex; flex-flow: row wrap; /*           */ justify-content: flex-end; } /*   */ @media all and (max-width: 800px) { .navigation { /*       ,       */ justify-content: space-around; } } /*   */ @media all and (max-width: 500px) { .navigation { /*         ,    */ flex-direction: column; } } 

شاشات كبيرة

شاشات منتصف

الشاشات الصغيرة

 .wrapper { display: flex; flex-flow: row wrap; } /*  ,      100%,  flex-base */ .wrapper > * { flex: 1 100%; } /*         * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /*   */ @media all and (min-width: 600px) { /*          */ .aside { flex: 1 auto; } } /*   */ @media all and (min-width: 800px) { /*            ,      ,      */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } } 

شاشات كبيرة

شاشات منتصف

الشاشات الصغيرة

 @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); } 

دعم المتصفح

• (جديد) يعني بناء الجملة الحديث من المواصفات (مثل العرض: المرن ؛ )
• (tweener) تعني بناء جملة غير رسمي غريب منذ عام 2011 (على سبيل المثال عرض: flexbox؛ )
• (قديم) يعني بناء الجملة القديم منذ عام 2009 (على سبيل المثال عرض: مربع ؛ )