Динамически реагирующий контейнер в стиле сетки в CSS

Question

В моем приложении пользователь может вводить текст и нажимать кнопку, чтобы добавить новый «span» в DOM (внутри контейнера), содержащий введенный им текст.Я хочу, чтобы эти промежутки имели столько ширины, сколько необходимо, чтобы соответствовать заданному пользователем введенному тексту (можно предположить, что пользователь не будет вводить что-то более длинное, чем ширина контейнера).Я также хотел бы, чтобы контейнер помещался в максимально возможное количество пролетов подряд;и если диапазону требуется больше места, чем осталось в текущей строке -> перейдите к строке ниже (см. последние две строки рисунка).

Какой тип CSS мне нужно добавить в мой контейнера также промежутки внутри него для достижения организации ниже?

Обратите внимание: ширина этого контейнера фиксирована, но высота увеличивается по мере необходимости для размещения новых интервалов, заполненных текстом

Answer 1

Чтобы сделать это с помощью свойства flex3 CSS3:

.container {
  display: flex;
  border: 1px solid red;
  width: 20rem;
  flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
  justify-content: space-between; /* alternatives are space-evenly or space-around*/
}

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

Answer 2

В соответствии с вашим макетом, вы можете выполнить свою задачу двумя способами:

• Использовать свойство flex CSS3
• Использовать свойство CSS3 width автоматически и плавать влево в классе span.

let span class = "class-name"

.class-name {
  display: inline-block;
  width: auto;
  float: left;
}

В этом классе span вы можете добавить дополнительные свойства в соответствии с вашими потребностями.