#html #css #flexbox #css-selectors
Вопрос:
У меня есть этот код:
.parent { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; width: 200px; height: 200px; } .child, .child:not(:nth-child(1)) { width: 100px; height: 100px; } .child:last-child:nth-child(1) { width: 200px; height: 200px; } .child:nth-child(1), .child:last-child:nth-child(2) { width: 100px; height: 200px; } .child:nth-last-child(4) { width: 100px; height: 100px; } Test with 1 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;/divgt; Test with 2 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;/divgt; Test with 3 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;div class="child" style="background-color:green;"gt;3lt;/divgt; lt;/divgt; Test with 4 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;div class="child" style="background-color:green;"gt;3lt;/divgt; lt;div class="child" style="background-color:orange;"gt;4lt;/divgt; lt;/divgt; Но я хотел бы, чтобы в последнем примере был другой порядок, то есть:
1 2 3 4 Важно то, что я не могу добавлять разные классы для каждого из детей flex. Галерея Twitter ведет себя аналогично, но там все сложнее (это flex в flex и, вероятно, некоторые JS, хотя, вероятно, работает по-другому). Мне нужно, чтобы все вышеупомянутые дела работали одновременно.
Ответ №1:
Вы можете добиться этого, используя сетку вместо гибкого трубопровода. Взгляните на это:
.parent { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; width: 200px; height: 200px; } /* in case there is only one child */ .child:first-child:nth-last-child(1){ grid-column: 1 / span 2; grid-row: 1 / span 2; } /* in case there are 2 children */ .child:first-child:nth-last-child(2), .child:first-child:nth-last-child(2) ~ .child{ grid-row: 1 / span 2; } /* in case there are 3 children, make the first one span 2 rows */ .child:first-child:nth-last-child(3) { grid-row: 1 / span 2; } Test with 1 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;/divgt; Test with 2 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;/divgt; Test with 3 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;div class="child" style="background-color:green;"gt;3lt;/divgt; lt;/divgt; Test with 4 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;div class="child" style="background-color:green;"gt;3lt;/divgt; lt;div class="child" style="background-color:orange;"gt;4lt;/divgt; lt;/divgt; Комментарии:
1. Большое спасибо. Именно это я и имел в виду. Я должен был добавить, что если вы не можете сгибаться, это также может быть сетка или что-то другое
Ответ №2:
В этом случае вам нужно структурировать свою гибкую сетку следующим образом:
.parent { display: flex; flex-wrap: wrap; width: 200px; height: 200px; } .child { width: 100px; height: 100px; } Test with 4 children lt;div class="parent" style="background-color:yellow;"gt; lt;div class="child" style="background-color:red;"gt;1lt;/divgt; lt;div class="child" style="background-color:blue;"gt;2lt;/divgt; lt;div class="child" style="background-color:green;"gt;3lt;/divgt; lt;div class="child" style="background-color:orange;"gt;4lt;/divgt; lt;/divgt; Обратите внимание, что вместо использования flex-direction: column мы используем flex-wrap: wrap для перемещения элементов в следующую строку.
Комментарии:
1. Если бы это было так просто, я бы не просил о помощи 😉 Мне нужно, чтобы все вышеупомянутые дела работали одновременно