Nhắm mục tiêu các mục flex trên hàng cuối cùng

Question

Vấn đề của tôi là tôi muốn có flexbox với chiều rộng phạm vi biến, và tất cả đều hoạt động tốt, nhưng không phải ở hàng cuối cùng. Tôi muốn cùng một kích thước cho tất cả trẻ em ngay cả khi hàng không đầy đủ của trẻ em (hàng cuối cùng).

#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; 
} 

divs flex của tôi có thể co lại cho đến khi 150px và lớn lên để 250px, nhưng tất cả phải có cùng kích thước (và rõ ràng là tôi muốn có một giải pháp CSS, với JS Tôi biết cách này).

Answer 1

Thật không may, trong lần lặp lại hiện tại của flexbox (Cấp độ 1), không có cách nào rõ ràng để giải quyết vấn đề căn chỉnh hàng cuối cùng. Đó là một vấn đề phổ biến.

Nó sẽ là hữu ích để có một tài sản flex dọc theo dòng:

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

Vấn đề này không xuất hiện như một ưu tiên cao cho Flexbox Cấp 2:

• CSS Working Group Wiki - Specification Issues and Planning
• https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

Mặc dù hành vi này là khó có thể đạt được trong flexbox, nó đơn giản và dễ dàng trong CSS Lưới Layout:

• Equal width flex items even after they wrap

Trong trường hợp lưới không phải là một lựa chọn, đây là một danh sách các câu hỏi tương tự chứa hacks flexbox khác nhau:

• Properly sizing and aligning the flex item(s) on the last row
• Flex-box: Align last row to grid
• Flexbox wrap - different alignment for last row
• How can a flex item keep the same dimensions when it is forced to a new row?
• Selector for an element alone in a row?
• Aligning elements in last flexbox row
• How can I allow flex-items to grow while keeping the same size?
• Left-align last row of flexbox using space-between and margins
• Inconsistent margin between flex items on last row
• How to keep wrapped flex-items the same width as the elements on the previous row?
• How to align left last row/line in multiple line flexbox
• Last children of grid get giant gutter cause of flexbox space-between
• Managing justify-content: space-between on last row
• Flexbox space between behavior combined with wrap

Answer 2

Là giải pháp nhanh chóng và bẩn nhất có thể sử dụng:

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