Flex: usify-content: пространство, но полноценный на обоих концах? ⇐ CSS

[Anonymous]

romplect < /strong>

Предположим, что мы хотим распространить ряд встроенных элементов внутри дивиата гибкой ширины, мы рассмотрим пространства на дальнем конце первого и Последние элементы должны быть значимыми и должны быть частью расстояния.

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

..

..

..

Изображение[/b]

Т.е. Превратите что-то вроде этого



в это :



В этом случае ширина всего этого сжимается до 2-го строка (самая широкая), поэтому между полями в этой строке нет промежутков.

Но содержимое каждого поля может различаться, и при необходимости интервал следует соответствующим образом корректировать:




< strong>Попытки

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

  justify-content: space-between

  (или другой стиль/обходные данные к тому же эффекту):
  
  
  
• js хак. Что ж, это работает, но я все еще надеюсь, что есть простой способ реализовать это.
• Добавление пустого div в начале и конце каждой строки div, а затем используйте пробел между.
  
  Это тоже работает, и именно так я получил изображения решения выше. Но тогда я бы получил кучу пустых элементов div.

Следует ли мне использовать для этого макет таблицы (в css , не в наценке)? Если да, то как?
Это заставляет меня плакать. Я был бы благодарен за любую помощь в поиске чистого решения этой проблемы.
Вот ссылка на игру

< strong>Решение
Fiddle
Размещение контента:'' ::before и ::after строки (эти псевдоэлементы являются прямыми дочерними элементами выделенных) эффективно реализует 4-й пункт выше (

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

space-between

+ пустые элементы на обоих концах) без избыточной наценки.

Подробнее здесь: https://stackoverflow.com/questions/250 ... -both-ends