صندوق مرنة CSS3

CSS3 صندوق مرنة هو وضع تخطيط جديد.

والغرض من إدخال مرونة تصميم نموذج الحقيبة هو توفير وسيلة أكثر كفاءة لترتيب الحاويات الفرعية العناصر، والمحاذاة والتوزيع من مساحة فارغة.

دعم المتصفح

الأرقام الواردة في الجدول تمثل أول متصفح لدعم رقم الإصدار الممتلكات.

مباشرة بعد متصفح عدد -webkit- أو بادئة محدد -moz-.

محتويات CSS3 صندوق مرنة

مربع مرنة مصنوعة من حاويات مرنة (فليكس حاوية) والعناصر شبه المرنة (فليكس البند) المكونات.

حاويات مرنة عن طريق تعيين خاصية العرض هو المرن أو سيتم تعريفها مضمنة المرن كما الحاوية مرنة.

تحتوي الحاوية مرنة واحد أو أكثر مرونة عناصر فرعية.

ملاحظة: الحاوية الخارجية المرنة وعنصر المرونة طفلا من تقديم العادي. يحدد مربع مرونة فقط في مدى قدرة العناصر التابعة داخل تخطيط الحاوية مرنة.

عادة يتم عرض مرنة عنصر فرعي في مربع خط مرن. افتراضيا، كل حاوية هو سطر واحد فقط.

ويبين الجدول التالي عنصر مرن يتم عرض العناصر التابعة في سطر واحد، من اليسار إلى اليمين:

وبطبيعة الحال، لا يمكننا تعديل الترتيب.

إذا وضعنا في direction الملكية إلى rtl (من اليمين إلى اليسار)، وترتيب العناصر شبه مرنة تتغير، وجاء تخطيطات الصفحات التغيير أيضا:

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

flex-direction يحدد أمر مرن فرعية عنصر في الحاوية الأصلية.

قواعد

flex-direction: row | row-reverse | column | column-reverse

flex-direction القيم هي:

• الصف: أفقيا من اليسار إلى اليمين (إلى اليسار)، الترتيب الافتراضي.
• الصف العكس: عكس محاذاة أفقيا (بزر الماوس الأيمن مبررة، إلى الأمام من الصف الخلفي، آخر واحد في الأعلى.
• عمود: الترتيب الرأسي.
• عمود عكس: عكس الترتيب الرأسي، من الصف الخلفي إلى الأمام، وأخيرا صف واحد في الأعلى.

يوضح المثال التالي row-reverse الاستخدام:

يوضح المثال التالي column المستخدمة:

توضح الأمثلة التالية في column-reverse الاستخدام:

السمة تبرير-المحتوى

محاذاة المحتوى (تبرير المحتوى) على خصائص المرونة في حاوية التطبيق، والبنود حاوية مرنة مرنة تتماشى على طول المحور الرئيسي (المحور الرئيسي).

تركيب تبرير المحتوى على النحو التالي:

justify-content: flex-start | flex-end | center | space-between | space-around

كل تحليل القيمة:

• المرن بداية:
  

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

• المرن نهاية:
  

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

• مركز:
  

  مشروع مرن تركزت المقبل لملء الفراغ. (إذا كانت المساحة الحرة المتبقية هو سلبي، سيتضمن المشروع أيضا تجاوز مرونة في كلا الاتجاهين).

• الفضاء بين:
  

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

• الفضاء حول:
  

  مشروع مرن وزعت بالتساوي على الخط، على كلا الجانبين من النصف الأيسر من الفضاء. إذا كانت المساحة هو سلبي أو مجرد مصطلح مرن، وقيمة ما يعادل المركز. خلاف ذلك، ومرونة من المشروع على طول خط التوزيع وفترات متساوية من بعضها البعض (على سبيل المثال، 20px)، في حين ترك نصف الفترة (1/2 * 20px = 10px) بين الرأس والذيل على كلا الجانبين، والحاويات المرنة.

تظهر الاداءات:

يوضح المثال التالي flex-end الاستخدام:

يوضح المثال التالي center استخدام الصورة:

توضح الأمثلة التالية في space-between استخدام:

توضح الأمثلة التالية في space-around استخدام:

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

align-items تعيين أو استرداد عنصر المرونة على جانب محور مربع (المحور العمودي) اتجاه المحاذاة.

قواعد

align-items: flex-start | flex-end | center | baseline | stretch

كل تحليل القيمة:

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

يوضح المثال التالي stretch(默认值) استخدام:

يوضح المثال التالي flex-start الاستخدام:

يوضح المثال التالي flex-end الاستخدام:

يوضح المثال التالي center استخدام الصورة:

يوضح المثال التالي baseline الاستعمال:

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

يستخدم السمةالمرن الختامية لتحديد مربع الطفل وضع التفاف عنصر مرن.

قواعد

flex-flow:  || 

كل تحليل القيمة:

• بلا التفاف - افتراضيا، الحاوية مرنة في سطر واحد.في هذه الحالة قد تجاوز الطفل مرونة حاوية.
• التفاف - حاوية مرنة خطوط متعددة.يتم وضع جزء تجاوز الطفل مرونة في هذه الحالة إلى سطر جديد، سوف يحدث كسر خط داخلي الفرعي
• التفاف العكسي - عكس ترتيب التفاف.

يوضح المثال التالي nowrap الاستخدام:

يوضح المثال التالي wrap الاستخدام:

يوضح المثال التالي wrap-reverse الاستخدام:

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

align-content يستخدم سمة لتعديل flex-wrap السلوك سمة. مماثلة align-items ، ولكن لم يتم تعيين محاذاة عناصر شبه مرنة، ولكن تعيين محاذاة كل صف.

قواعد

align-content: flex-start | flex-end | center | space-between | space-around | stretch

كل تحليل القيمة:

• stretch - الافتراضي. وكل سطر تمتد لاحتلال المساحة المتبقية.
• flex-start - صفوف من صناديق مكدسة الى نقطة الانطلاق من الحاوية مرنة.
• flex-end - صفوف من صناديق مكدسة إلى نهاية الموقف من الحاوية مرنة.
• center - صفوف من صناديق مكدسة إلى موقف وسط الحاوية مرنة.
• space-between - كل صف الحاوية الحقيبة مرنة موزعة بالتساوي.
• space-around - كل سطر في حاوية الحقيبة مرنة موزعة بالتساوي بين طرفي الاحتفاظ نصف من العناصر الفرعية والعناصر الفرعية تباعد الحجم.

يوضح المثال التالي center استخدام الصورة:

سمات عنصر شبه مرنة

تسلسل

قواعد

order: 

كل تحليل القيمة:

• <صحيح>: قيمة عددية تستخدم لتحديد الترتيب الذي قيمة صغيرة من السطح العلوي. ويمكن أن يكون سلبيا.

order لتعيين خصائص ضمن خصائص المرونة من العناصر التابعة للحاويات مرنة:

محاذاة

إعدادات "هامش" هو "تلقائي" قيمة، تلقائيا الحصول على حاوية مرنة في المساحة المتبقية. حتى تعيين قيمة هامش العمودية من "السيارات"، فإنه يسمح تتركز عناصر شبه مرنة تماما على اتجاه محور اثنين من الحاويات المرنة.

الأمثلة التالية على أول عنصر شبه مرنة تحديد margin-right: auto; . سيتم وضع المساحة المتبقية في العناصر الصحيحة:

مركز الكمال

سيكون الأمثلة التالية الحل الأمثل لمشاكل نحن عادة تواجه المركز.

مربع مرنة، ويصبح مركز بسيط جدا، فقط أريد أن تعيين margin: auto; يمكن أن تجعل من عناصر شبه مرنة في الاتجاه المحوري على اثنين تركز تماما:

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

align-self يستخدم السمة لتحديد اتجاه محاذاة عنصر مرن نفسه على جانب محور (المحور الرأسي).

قواعد

align-self: auto | flex-start | flex-end | center | baseline | stretch

كل تحليل القيمة:

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

يوضح المثال التالي العناصر شبه مرنة تتلاءم الذاتي تأثير تطبيق قيم مختلفة:

ثني

flex يستخدم سمة لتحديد كيفية تخصيص مساحة للعناصر شبه مرنة.

قواعد

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

كل تحليل القيمة:

• لا شيء: لا شيء حساب الكلمة الرئيسية: 0 0 السيارات
• [فليكس تنمو]: تعريف مربع عنصر نسبة التوسع مرنة.
• [فليكس يتقلص]: تعريف مربع عنصر نسبة انكماش مرنة.
• [فليكس أساس]: تعرف القيمة المرجعية الافتراضية عنصر مرن منطقة الجزاء.

في المثال التالي، وهو أول عنصر شبه مرنة يحتل 2/4 من المساحة، والآخر كل منهما 1/4 الفضاء:

مزيد من الأمثلة

إنشاء صفحة استجابة باستخدام مربع مرنة

خصائص مربع مرنة CSS3

يسرد الجدول التالي تستخدم عادة لمربع في خصائص المرونة: