أحدث الأخبار

لدينا أفكار حول تصميم البرمجيات والتنمية

دليل كامل ل فليكسبوكس في 20 دقيقة

مربع CSS3 مرنة، أوحول flexbox, هو وضع تخطيط يوفر ترتيب العناصر على الصفحة بحيث العناصر تتصرف بشكل متوقع عندما يجب أن يتوافق تخطيط الصفحة مع أحجام مختلفة للشاشة وأجهزة عرض مختلفة.

مصدر: www.css-tricks.com

خلفية

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

أساسيات & أمب؛ المصطلح

خصائص للوالد
(حاوية فليكس)

#عرض

ويحدد هذا الحاوية المرنة؛ مضمنة أو كتلة اعتمادا على قيمة معينة. فإنه يتيح سياق المرن لجميع الأطفال مباشرة.

.حاوية {
  عرض: ثني; /* or inline-flex */
}

لاحظ أن أعمدة كس ليس لها تأثير على الحاوية المرنة.

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


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

.container {
  المرن الاتجاه: الصف | الصف العكسي | العمود | عمود العكس;
}
  • صف (افتراضي): من اليسار إلى اليمين ltr; من اليمين إلى اليسار في ار تي ال
  • الصف العكس: من اليمين إلى اليسار في ltr; من اليسار إلى اليمين في rtl
  • عمود: مثل صف ولكن من أعلى إلى أسفل
  • عمود العكس: مثل الصف العكس ولكن أسفل إلى أعلى

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

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

.container{
  flex-wrap: نوراب | التفاف | التفاف للعكس;
}
  • بلا التفاف (الافتراضي): جميع العناصر المرنة ستكون على سطر واحد
  • لف: فليكس العناصر سوف التفاف على خطوط متعددة، من أعلى إلى أسفل.
  • التفاف للعكس: فليكس البنود سوف التفاف على خطوط متعددة من أسفل إلى أعلى.

هناك بعض العروض البصرية من المرن الختامية here.

#فليكس-فلو (ينطبق على: الأصل فليكس كونتينر إليمنت)

هذا هو الاختزالالمرن الاتجاه و المرن الختامية خصائص، والتي تحدد معا المحاور الرئيسية وعبر الحاوية المرنة. الافتراضي هو صف نوراب.

المرن تدفق: <‘flex-direction’> || <‘flex-wrap’>

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


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

.container {
  تبرير المحتوى: فليكس-ستارت | فليكس-إند | مركز | المسافة بين | الفضاء حول;
}
  • المرن بدء (افتراضي): العناصر معبأة نحو خط البداية
  • المرن نهاية: البنود هي معبأة نحو نهاية الخط
  • مركز: البنود تتمحور على طول الخط
  • الفضاء بين: البنود موزعة بالتساوي في الخط؛ البند الأول هو على خط البداية، البند الأخير على السطر الأخير
  • الفضاء حول: يتم توزيع العناصر بالتساوي في خط مع مساحة متساوية من حولهم. لاحظ أن المساحات بصريا ليست متساوية، لأن جميع العناصر لها مساحة متساوية على كلا الجانبين. سيكون للبند الأول وحدة واحدة من المساحة مقابل حافة الحاوية، ولكن وحدتين من المساحة بين العنصر التالي لأن العنصر التالي له تباعده الخاص الذي ينطبق.

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


يحدد هذا السلوك الافتراضي لكيفية وضع العناصر المرنة على طول المحور المتقاطع على السطر الحالي. فكر في الأمرتبرير المحتوى version for the cross-axis (perpendicular to the main-axis).

.container {
  align-items: فليكس-ستارت | فليكس-إند | مركز | خط الأساس | تمتد;
}
  • المرن بدء: يتم وضع حافة الهامش عبر بداية من البنود على خط البداية
  • المرن نهاية: يتم وضع حافة هامش عبر الحدود من البنود على خط عبر نهاية
  • مركز: وتتركز العناصر في عبر محور
  • خط الأساس: يتم محاذاة البنود مثل محاذاة خطوط الأساس الخاصة بهم
  • تمتد (الافتراضي): تمتد لملء الحاوية (لا يزال احترام دقيقة العرض / ماكس العرض)

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


ويؤدي ذلك إلى محاذاة خطوط الحاوية المرنة في حالة وجود مساحة إضافية في المحور المتقاطع، على غرار الطريقة تبرير المحتوى aligns individual items within the main-axis.

ملحوظة: هذا العقار ليس له أي تأثير عندما يكون هناك سطر واحد فقط من العناصر المرنة.

.container {
  محاذاة المحتوى: فليكس-ستارت | فليكس-إند | مركز | المسافة بين | الفضاء حول | تمتد;
}
  • المرن بدء: خطوط معبأة إلى بداية الحاوية
  • المرن نهاية: خطوط معبأة إلى نهاية الحاوية
  • مركز: خطوط معبأة إلى مركز الحاوية
  • الفضاء بين: خطوط موزعة بالتساوي. السطر الأول هو في بداية الحاوية في حين أن آخر واحد هو في النهاية
  • الفضاء حول: خطوط موزعة بالتساوي مع مساحة متساوية حول كل سطر
  • تمتد (افتراضي): تمتد الخطوط لاستيعاب المساحة المتبقية

خصائص للأطفال
(العناصر المرنة)

#order


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

.item {
  طلب: <integer>;
}

#flex-grow


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

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

.item {
  المرن تنمو: <number>; /* default 0 */
}

الأرقام السلبية غير صالحة.

#flex-shrink

وهذا يحدد القدرة على تقليص البند المرن إذا لزم الأمر.

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

الأرقام السلبية غير صالحة.

#flex-basis

يحدد هذا الحجم الافتراضي لعنصر قبل توزيع المساحة المتبقية. يمكن أن يكون طولا (مثل 20٪، 5rem، إلخ) أو كلمة رئيسية. ال auto تعني الكلمة الرئيسية “إلقاء نظرة على خاصية العرض أو الارتفاع” (التي تم تنفيذها مؤقتا من قبل الرئيسية الحجم الكلمة الرئيسية حتى يتم إيقافها). ال يحتوى الكلمة الرئيسية تعني “حجمها استنادا إلى محتوى العنصر” – فهذه الكلمة الرئيسية غير مدعومة بشكل جيد حتى الآن، لذلك من الصعب اختبار أصعب إخوانها max-content, مين المحتوى, و مناسبة المحتوى فعل.

.item {
  ، أساس المرن: <length> | auto; /* default auto */
}

إذا تم تعيين إلى 0, لا يتم وضع مساحة إضافية حول المحتوى في. إذا تم تعيين إلىتلقاءي, يتم توزيع مساحة إضافية على أساس لها المرن تنمو القيمة. انظر هذا الرسم.

#flex

هذا هو الاختزال ل المرن تنمو, المرن يتقلص و ، أساس المرن مشترك. المعلمات الثانية والثالثة (flex-shrink and ، أساس المرن) اختيارية. الافتراضي هو 0 1 auto.

.item {
  ثني: لا شيء | [ <'flex-grow'> <'المرن يتقلص'>? || <'، أساس المرن'> ]
}

من المستحسن استخدام هذه الخاصية الاختزال بدلا من تعيين الخصائص الفردية. يد قصيرة يحدد القيم الأخرى بذكاء.

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


هذا يسمح المحاذاة الافتراضية (أو واحد المحدد من قبل البنود محاذاة) ليتم تجاوزها لعناصر فليكس الفردية.

الرجاء مراجعة البنود محاذاة شرح لفهم القيم المتاحة.

.بند {
  محاذاة الذاتي: أوتو | فليكس-ستارت | فليكس-إند | مركز | خط الأساس | تمتد;
}

لاحظ أن تطفو, واضح و محاذاة رأسية ليس لها أي تأثير على البند المرن.

نحن هنا وسعيدة للمساعدة!

البريد الإلكتروني

وسوف نعود اليكم في أقرب وقت ممكن.

ارسل بريد الكتروني

دردشة مباشرة

التحدث على الانترنت مع شركائنا دعم العملاء رهيبة.

الدردشة الآن

مكالمة

من الاثنين إلى الجمعة من 8:00 حتي 08:00 إست.

+91 9555960648

دعم الفيديو

مشاهدة الفيديو على الانترنت والبدء بسرعة.

شاهد الآن

لدي سؤال؟ فريقنا هنا للمساعدة