Как заполнить последнюю строку фальшивыми элементами в адаптивном макете сетки flexbox?
У нас есть типичная адаптивная сетка flexbox с элементами фиксированной ширины и динамическое количество строк в зависимости от разрешения экрана и количества элементов. Например, предположим, что у нас есть семь <div>, это будет выглядеть примерно так:
Нам нужно заполнить последнюю строку «фальшивыми» элементами или заполнителями без лишнего HTML:
И, если мы изменим разрешение, оно должно пересчитать необходимые заполнители:
Возможно ли это с помощью простого CSS?
Мы используем flexbox, но мы открыты для использования макета CSS Grid, если он решит нашу проблему.
Не совсем, без JS можно обойтись.
@HiddenHobbes Нам нечего показывать, мы просто думаем, можно ли решить эту проблему с помощью простого CSS. Конечно, у нас есть первый случай, но это просто список div внутри контейнера flexbox.
Не могли бы вы включить это, так как это было бы лучше, чем ничего, и дать отправную точку для любых изменений.
Код @HiddenHobbes требуется только для отладочных вопросов "почему не работает этот код". Вопросы, спрашивающие, как сделать что-то с нуля (или спрашивающие, возможно ли что-то), не требуют кода; они просто необычны, потому что большинство из них слишком широкие. Однако это не так.
@TylerH Достаточно честно, хотя предоставление кода, который у них был до этого момента, обеспечило бы хорошую отправную точку.
Ответы 1
Это может быть подход.
Уловка состоит в том, чтобы использовать псевдоэлементы (действующие как заполнители) для репликации каждого элемента в той же позиции на строку ниже. И используйте overflow: hidden, чтобы скрыть последний ряд псевдоэлементов, выходящих за пределы гибкого контейнера. Вот картинка, показывающая смещение и переполнение 3px, чтобы помочь понять идею.
Но, конечно, у него может быть много недостатков в зависимости от ваших конкретных требований.
ul {
list-style: none;
margin: 0;
padding: 0;
}
.flex {
display: flex;
flex-wrap: wrap;
width: 100%;
overflow: hidden;
}
li {
position: relative;
box-sizing: border-box;
background: #299CFF;
width: 3em;
height: 3em;
margin: 0.25em;
text-align: center;
line-height: 3;
color: white;
}
li::before {
position: absolute;
top: calc(3em + 2 * 0.25em);
content: "X";
display: block;
width: 3em;
height: 3em;
background: red;
}<ul class = "flex">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
</ul>Это замечательно, но при таком подходе вам нужно знать количество столбцов сетки, а мы этого не делаем, потому что нам нужно, чтобы она реагировала. Наша проблема больше похожа на «хорошо, у нас есть 12 элементов шириной 100 пикселей. Просто создайте сетку в доступном пространстве и заполните последнюю строку фальшивыми элементами».
Не совсем. Это отзывчиво. В иллюстративных целях я зафиксировал ширину контейнеров wide и narrow, но просто взгляните на ручку: codepen.io/jordinebot/pen/qKEdbw
Вы абсолютно правы, я внимательно посмотрел на то, что вы здесь делаете, и теперь понимаю это. Блестяще!
Просто чтобы получить правильный ответ: что бы вы сделали, если бы неполная (и единственная) строка была первой? Подхода «дублировать и смещать» было бы недостаточно. Любое предложение?
В этом случае я бы разместил псевдоэлементы справа, а не ниже, но вы должны рассчитать расстояние, чтобы покрыть, по крайней мере, количество реальных элементов, которые должны быть уверены, что вы заполнили весь контейнер. И это будет работать, только если у вас заполнена хотя бы половина строки.
Честно говоря, я бы удалил первый фрагмент и остановился на втором, это намного лучше в качестве ответа на этот вопрос. Или, по крайней мере, минимизировать первое и расширить второе.
Включите свой код, чтобы показать, что вы уже пробовали.