Равномерное выравнивание элементов в overflow-x контейнере

Question

Есть блок с overlow-x: scroll с неизвестным количеством элементов. Возможно ли без помощи js при переполнении #container расположить видимые элементы как при justify-content: space-between?

const $container = document.getElementById(`container`);


document.getElementById(`add`).addEventListener(`click`, () => $container.insertAdjacentHTML(`afterbegin`, `<div class='item'></div>`))

document.getElementById(`remove`).addEventListener(`click`, () => $container.lastChild.remove())

#container {
  padding: .5rem;
  background-color: gray;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
  min-width: 3rem;
  height: 3rem;
}

.item+.item {
  margin-left: .5rem;
}

.item:nth-child(odd) {
  background-color: green
}

.item:nth-child(even) {
  background-color: red
}

<div id='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
<button id='add' type='button'>Добавить элемент</button>
<button id='remove' type='button'>Удалить элемент</button>

Answer 1

Без скриптов такие штуки получаются капризными и непредсказуемыми (к тому же с flex-ами и так хватает сложностей). Но, как говориться, хозяин - барин.

Если готовы к "костылям", то будет так:

const $container = document.getElementById(`container`);
let i = 5;

document.getElementById(`add`).addEventListener(`click`, () => { $container.insertAdjacentHTML(`afterbegin`, `<div class='item'>${i}</div>`); i++;})

document.getElementById(`remove`).addEventListener(`click`, () => $container.lastChild.remove())

#container {
  padding: .5rem;
  background-color: gray;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  flex-flow: row nowrap;
  justify-content: start;
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
  min-width: 3rem;
  height: 3rem;
}

.item+.item {
  margin-left: .5rem;
}

.item:nth-child(odd) {
  background-color: green
}

.item:nth-child(even) {
  background-color: red
}

.item:first-child {
  margin-left: auto;
}
.item:last-child {
  margin-right: auto;
}

<div id='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
</div>
<button id='add' type='button'>Добавить элемент</button>
<button id='remove' type='button'>Удалить элемент</button>

Хотя, на мой взгляд, более правильным было бы следующее:

const $container = document.getElementById(`container`);
let i = 5;

document.getElementById(`add`).addEventListener(`click`, () => { $container.insertAdjacentHTML(`afterbegin`, `<div class='item'>${i}</div>`); i++;})

document.getElementById(`remove`).addEventListener(`click`, () => $container.lastChild.remove())

#container {
  padding: .5rem;
  background-color: gray;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: center;
  scroll-snap-type: x mandatory;
}

.item {
  display: inline-block;
  scroll-snap-align: start;
  min-width: 3rem;
  height: 3rem;
}

.item+.item {
  margin-left: .5rem;
}

.item:nth-child(odd) {
  background-color: green
}

.item:nth-child(even) {
  background-color: red
}

<div id='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
</div>
<button id='add' type='button'>Добавить элемент</button>
<button id='remove' type='button'>Удалить элемент</button>

БЛОГ НА HUSL

Равномерное выравнивание элементов в overflow-x контейнере

Ответы (1 шт):