Фрагмент стека

вы используете flexbox wrap для создания сетки, и у вас есть последняя строка с меньшим количеством элементов, чем в предыдущих строках, поведение по умолчанию «потерянных» элементов сflex: 1 это растянуть горизонтально, чтобы заполнить ширину - делая элементы больше, чем предыдущие строки. Мне нужно то же поведение, за исключением того, что я хочу, чтобы более крупные элементы отображались в верхнем ряду, а не в нижнем.

Я придумала решение (показано ниже), но оно плохо масштабируется и похоже на плохой взлом. Есть ли лучший (более элегантный) способ добиться этого макета? Решение должно обрабатывать динамический контент; т.е. я не буду знать количество элементов заранее, и мне нужно поддерживать порядок источников.

Это должно выглядеть так:

ul#subcategory_list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

ul#subcategory_list li:nth-child(1) {order: 30}
ul#subcategory_list li:nth-child(2) {order: 29}
ul#subcategory_list li:nth-child(3) {order: 28}
ul#subcategory_list li:nth-child(4) {order: 27}
ul#subcategory_list li:nth-child(5) {order: 26}
ul#subcategory_list li:nth-child(6) {order: 25}
ul#subcategory_list li:nth-child(7) {order: 24}
ul#subcategory_list li:nth-child(8) {order: 23}
ul#subcategory_list li:nth-child(9) {order: 22}
ul#subcategory_list li:nth-child(10) {order: 21}
ul#subcategory_list li:nth-child(11) {order: 20}
ul#subcategory_list li:nth-child(12) {order: 19}
ul#subcategory_list li:nth-child(13) {order: 18}
ul#subcategory_list li:nth-child(14) {order: 17}
ul#subcategory_list li:nth-child(15) {order: 16}
ul#subcategory_list li:nth-child(16) {order: 15}
ul#subcategory_list li:nth-child(17) {order: 14}
ul#subcategory_list li:nth-child(18) {order: 13}
ul#subcategory_list li:nth-child(19) {order: 12}
ul#subcategory_list li:nth-child(20) {order: 11}
ul#subcategory_list li:nth-child(21) {order: 10}
ul#subcategory_list li:nth-child(22) {order: 9}
ul#subcategory_list li:nth-child(23) {order: 8}
ul#subcategory_list li:nth-child(24) {order: 7}
ul#subcategory_list li:nth-child(25) {order: 6}
ul#subcategory_list li:nth-child(26) {order: 5}
ul#subcategory_list li:nth-child(27) {order: 4}
ul#subcategory_list li:nth-child(28) {order: 3}
ul#subcategory_list li:nth-child(29) {order: 2}
ul#subcategory_list li:nth-child(30) {order: 1}
 SpliFF18 окт. 2017 г., 09:42
Опубликуйте это как ответ. У меня есть доступ к генерации на стороне сервера, поэтому встроенный код является хорошим вариантом, который я упустил (однако less / sass не являются частью моего развертывания, поэтому они не учитываются). Ваш ответ решает проблемы с хаотичностью таблиц стилей и масштабируемостью, и это здорово.
 LGSon18 окт. 2017 г., 09:28
Предполагая, что вы хотите избавиться отnth-child Список правил CSS, нет 1-лайнера, который делает это. Если вы генерируете элементы динамически, вы можете добавитьorder свойство встроенное, и если вы не знаете заранее, сколько элементов, вы можете начать со значения, которое вы наверняка никогда не превысите, то есть 1000, а затем пойти вниз. Если это приемлемый вариант, я могу опубликовать это как ответ.

Ответы на вопрос(1)

Решение Вопроса

nth-child Список правил CSS, нет 1-лайнера, который делает это.

Если вы генерируете элементы динамически, вы можете добавитьorder свойство встроенное, и если вы не знаете заранее, сколько элементов, вы можете начать со значения, которое вы наверняка никогда не превысите, то есть 1000, а затем пойти вниз.

Фрагмент стека

ul#subcategory_list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

ul#subcategory_list li {
  flex: 1 1 25%;
  border: 1px solid gray;
  box-sizing: border-box;
}
<ul id="subcategory_list">
  <li style="order: 1000">1</li>
  <li style="order: 999">2</li>
  <li style="order: 998">3</li>
  <li style="order: 997">4</li>
  <li style="order: 996">5</li>
  <li style="order: 995">6</li>
</ul>

Ваш ответ на вопрос