Распределение элементов встроенного блока (с переменной шириной) в нескольких строках в контейнере с фиксированной шириной

Question

У меня есть несколько <input type="radio"/ > переключателей, которые используются в качестве кнопок переключения в соответствии с этим примером: http://jsfiddle.net/davidelrizzo/DYJkG/

Сами кнопки имеют переменную ширину и сгруппированы внутри <div class="toggle-btn-grp">.

Группа кнопок сама находится в родительском элементе <div> с фиксированной шириной (синие линии на рисунке) и отступами (розовые линии).

В настоящее время кнопки разделены margin-right:1em. Крайний правый элемент в каждой строке, однако, не должен иметь правого поля (или этот должен переполнять заполнение контейнера прародителя).

Как мы видим, для кнопки № 6 достаточно места, чтобы остаться в той же строке, что и кнопка № 5, если справа от нее не было поля.

Как этого добиться?

Вот X HTML :

<div class="toggle-btn-grp" style="padding-top:0.3em;padding-bottom:0.3em;word-spacing:-.3em;" >
    <label onclick="" class="toggle-btn"><input type="radio" name="brand" value="1" />1</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="brand" value="2 "/>2</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="brand" value="3" />3</label>
(...)
</div> 

и CSS кнопок переключения:

/* Toggle buttons */

label { 
    padding:0.3em 1em 0.3em 0; 
}
.toggle-btn-grp { 
}


.toggle-btn { 
    display:inline-block;
    text-align:center; 
    min-width:3em;
    margin-bottom:1em;
    margin-right:1em;
    padding:0.2em 1em; 
    /*background-color:#f8f8f8;*/
    border-radius:0.2em; 
    border:solid 2px #ccc;
    cursor:pointer;
}

.toggle-btn-grp.joint-toggle .toggle-btn { 
    margin:5px 0; 
    padding:0.2em 0.1em; 
    border-radius:0px;
    border-right-color:#fff;
}

.toggle-btn-grp.joint-toggle {
  display:inline-block;
}

.toggle-btn-grp.joint-toggle .toggle-btn:first-child { 
    margin-left:2px; 
    border-radius: 0.2em 0px 0px 0.1em; 
}
.toggle-btn-grp.joint-toggle .toggle-btn:last-child { 
    margin-right:2px;  
    border-radius: 0px 0.2em 0.1em 0px;
    border-right:solid 1px #ccc;
}


.toggle-btn:hover { 
    border:solid 2px #888 !important;
    color:#000;
    background:#def;
}

.toggle-btn.active {
    color: #fff;
    font-weight:bold; 
    background:#a2dafe;
    border:solid 1px #888 !important; 
}


.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto; 
}

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

.toggle-btn:nth-child(odd) {
 margin-right:1em;
}

Примечание 2 . Я попытался использовать гибкий макет, но у меня это не сработало:

.toggle-btn-grp {
  display: flex;
  flex-direction: row;
}
.toggle-btn {
  flex: 1 1 auto;
}

Answer 1

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

/* Toggle buttons */

.toggle-btn-grp { 
  padding-top:0.3em;
  padding-bottom:0.3em;
  letter-spacing:0.65em; /* this controls the gap between the labels */
}

.toggle-btn { 
  font-size:1rem;
  background-color:lightblue;
  display:inline-block;
  text-align:center; 
  margin-bottom:1em;
  padding:0.2em 1em; 
  border-radius:0.2em; 
  border:solid 2px #ccc;
  cursor:pointer;
  letter-spacing:0em; /* resets the spacing inside the labels */
}

/* Just for demo purposes */

body {
  width:155px;
  border-color: blue;
  border-style: solid;
  border-width: 0 1px;
  padding:10px;
  position:relative;
}
body::before, body::after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  border-right:1px solid pink;
}

body::before {
  left:10px;
}
body::after {
  right:10px;
}

<div class="toggle-btn-grp">
    <label class="toggle-btn"><input type="radio" name="brand" value="1" />1</label>
    <label class="toggle-btn"><input type="radio" name="brand" value="2 "/>2</label>
    <label class="toggle-btn"><input type="radio" name="brand" value="3" />3</label>
    <label class="toggle-btn"><input type="radio" name="brand" value="10" />10</label>
    <label class="toggle-btn"><input type="radio" name="brand" value="20 "/>20</label>
    <label class="toggle-btn"><input type="radio" name="brand" value="100" />100</label>
</div>

Answer 2

Я бы рекомендовал просмотреть свойство gap в сетке CSS. MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout CSS Трюки: https://css-tricks.com/snippets/css/complete-guide-grid/

Разрыв применяется только между предметами. Примерно так может начаться.

.toggle-btn-grp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 1rem;
}