I want to find elegant way for toggle one column for flex layout.
- Is i possible to do pure CSS?
- Opacity = 0, but GAPs ..
- display: none, GAPs - OK, but transition not working for dipslay-none (transition-behavior not now)
- padding to container increase offsetWidth
- tryed with negative margin-left. Its OK if we have only 2 items
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; */}<div class="container"><div data-qs="left" class="left"> Left </div><div data-qs="middle" class="middle"> Middle </div><div data-qs="right" class="right"> Right </div></div><button data-slide="left"> Toggle left </button><button data-slide="right"> Toggle right </button>