Как реализовать разделители между обернутыми гибкими элементами?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как реализовать разделители между обернутыми гибкими элементами?

Сообщение Anonymous »

Как реализовать разделители между упакованными гибкими элементами?
Это пример кода, в который я хочу добавить разделители:

Код: Выделить всё

.a {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.b {
background-color: #F6E0E0;
width: 105px;
height: 80px;
}

Код: Выделить всё

b
b
b
b
b
b
b
b
b
b
b
b
b
b
b


Каждый блок должен быть отделен от блоков слева и справа разделителем (например, элементом div шириной 1 пиксель и высотой 50 пикселей и цветом фона). Однако один блок, находящийся на правом краю контейнера, не должен быть разделен следующим блоком, находящимся на левом краю контейнера и на следующей строке. Поскольку перенос является динамическим (чтобы стиль был плавным), я не могу добавлять разделители в определенных позициях.
Я пробовал использовать границы или элементы div, но не смог получить правильный результат. Я также попробовал обходной путь, установив для justify-content значение space-between и добавив к разделителям значение поля-право -1px, чтобы те, что справа, выходили из контейнера, но мне нужно, чтобы для justify-content было установлено значение space-around, поэтому это решение недопустимо.

Подробнее здесь: https://stackoverflow.com/questions/641 ... flex-items
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»