Javascript или CSS — элегантный переключатель flex div (макет столбца) [закрыто] ⇐ CSS

[Anonymous]

Я хочу найти элегантный способ переключения одного столбца для гибкого макета.

• Можно ли использовать чистый CSS? >
• Непрозрачность = 0, но пробелы..
• отображение: нет, пробелы — ОК, но переход не работает для dipslay-none (поведение перехода не сейчас)
• дополнение к контейнеру увеличивает offsetWidth
• пробовано с отрицательным полем слева. Ничего страшного, если у нас есть только 2 элемента

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

document.querySelectorAll('[data-slide]').forEach(function(elem) {
elem.addEventListener("click", function() {
document.querySelector(`[data-qs=${this.dataset.slide}]`).classList.toggle('off');
});
});

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

.container {
outline: 3px solid red;
display: flex;
height: 100px;
overflow: hiddenn;
width: 300px;
margin-bottom: 10px;
padding: 10px;
gap: 10px;
}

.left {
flex: 1 0 30%;
background-color: yellow;
transition: 0.5s linear;
}

.middle {
flex: 1 0 40%;
background-color: green;
transition: 0.5s linear;
}

.right {
flex: 1 0 30%;
background-color: blue;
transition: 0.5s linear;
}

.off {
flex: 0 0 0;
/* display: none; */
/* width: 0; */
/* opacity: 0; */
}

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

 Left
Middle
Right

 Toggle left  
 Toggle right 

Подробнее здесь: https://stackoverflow.com/questions/786 ... umn-layout