weschool - www w3schools com html5




استهداف العناصر المرنة في الصف الأخير أو المحدد (2)

مشكلتي هي أنني أريد صندوق Flexbox بعرض النطاق المتغير ، وكل شيء يعمل جيدًا ، ولكن ليس في الصف الأخير. أريد نفس البعد لجميع الأطفال حتى في حالة عدم امتلاء الصف بالأطفال (الصف الأخير).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

أنا خلقت موقف ديناميكي في jsFiddle

يمكن أن تقلص div div الخاصة بي حتى 150px وتنمو حتى 250px ، ولكن يجب أن تكون جميعها بنفس الحجم (ومن الواضح أنني أريد حل CSS ، مع JS أعرف الطريق).


كحل سريع وقذرة يمكن للمرء استخدام:

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}

لسوء الحظ ، في التكرار الحالي لـ flexbox (المستوى 1) ، لا توجد طريقة نظيفة لحل مشكلة محاذاة الصف الأخير. إنها مشكلة شائعة.

قد يكون من المفيد الحصول على خاصية فليكس على غرار:

  • last-row
  • last-column
  • only-child-in-a-row
  • alone-in-a-column

يبدو أن هذه المشكلة تمثل أولوية عالية لـ Flexbox المستوى 2:

على الرغم من صعوبة تحقيق هذا السلوك في flexbox ، إلا أنه بسيط وسهل في CSS Grid Layout :

  • عناصر متساوية العرض متساوية حتى بعد التفافها

في حال لم يكن Grid خيارًا ، إليك قائمة بالأسئلة المتشابهة التي تحتوي على العديد من اختراقات flexbox:





flexbox