Kierowanie elementów flex w ostatnim wierszu

Question

Moim problemem jest to, że chcę flexbox o zmiennej szerokości zakresu i wszystko działa dobrze, ale nie w ostatnim rzędzie. Chcę tego samego wymiaru dla wszystkich dzieci, nawet jeśli rząd nie jest pełen dzieci (ostatni rząd).

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

Moi Flex DIV może kurczyć aż 150 pikseli i dorastają do 250 pikseli, ale wszystkie muszą być tego samego rozmiaru (i oczywiście chcę rozwiązanie CSS, z JS Znam drogę).

Answer 1

Niestety, w obecnej iteracji flexbox (poziom 1) nie ma prostego sposobu na rozwiązanie problemu z wyrównaniem ostatniego rzędu. To powszechny problem.

Dobrze byłoby mieć właściwości elastycznego wzdłuż linii:

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

Problem ten wydaje się być wysoki priorytet dla Flexbox Level 2:

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

Mimo to zachowanie jest trudne do osiągnięcia w schematu flexbox, to proste i łatwe w CSS Siatka Układ:

• Equal width flex items even after they wrap

W przypadku siatki nie jest opcją, oto lista podobnych pytań zawierających różne hacki schematu flexbox:

• 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

Jako szybkie i brudne rozwiązanie można użyć:

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