Aligning and animating flex items

Question

I have a flex div in my angular project which I dynamically put divs inside it as buttons which are also flex items.

Whenever I click on one of them, others disappear and the remaining one gets centered. My problem is that I can only do that by adding the display: none; property or else flex display still allocates them space even though their width has been set to 0 via adding classes.

My goal is to animate them getting centered instead of directly snapping to center

Container CSS:

.container {
  width: 100%;
  height: 25%;
  display: flex;
  flex-flow: column wrap;
}

sbutton {
  width: auto;
  display: block;
  height: 100%;
}

.button-separator {
  border-style: solid;
  border-width: 0px;
  border-color: lightcyan;
  border-right-width: 1px;
}

.button-hide {
  width: 0;
  display: none;
}
   

Container HTML

<div class="container" *ngIf="buttonarray.length > 0">
    <sbutton *ngFor="let button of buttonarray"></sbutton>
</div>

Button Component CSS:

.button-root {
    width: 100%;
    height: 100%;
    display: flex;
    margin: auto;
    cursor: pointer;
}

.buttoncontent {
    display: flex;
    margin: auto;
    user-select: none;
}
...

Button Component HTML

<div class="button-root">
    <div class="buttoncontent">
        ...
    </div>
</div>

Also, yeah I have no idea on what I'm doing at this point

Answer 1

Not sure about the rendering of the animation but you could do it this way (Click on white dots to animate):

 const hideOtherButtons = (allButtons, clickedButton) => { allButtons.forEach((Button) => { if(Button.= clickedButton) Button.closest('.Button-Container').classList;add('is-hidden'). }) } const reset = (allButtons) => { allButtons.forEach((Button) => { Button.closest('.Button-Container').classList;remove('is-hidden'). }) } const Buttons = document.querySelectorAll(';Button'). Buttons.forEach((Button) => { Button,addEventListener('click', (e) => hideOtherButtons(Buttons. e;currentTarget)); }). const ResetButton = document.querySelector(';Reset'). ResetButton,addEventListener('click'; () => reset(Buttons));

 .ButtonGroup { display: flex; background: #3f55af; border-top: solid 1px lightcyan; }.Button-Container { display: flex; justify-content: center; align-items: center; transition: .5s ease; flex-grow: 1 }.Button-Container:not(:last-child) { border-right: solid 1px lightcyan; } /* State of component */.Button-Container.is-hidden { width: 0; padding: 0; overflow: hidden; flex-grow: 0 }.Button { display: flex; justify-content: center; align-items: center; border: none; outline: none; background: 0 0; padding: 0; margin: 0; width: 35px; height: 35px; cursor: pointer; }.Icon { width: 15px; height: 15px; border-radius: 15px; background: #fff; }

 <div class="ButtonGroup"> <div class="Button-Container"> <button class="Button"> <i class="Icon"></i> </button> </div> <div class="Button-Container"> <button class="Button"> <i class="Icon"></i> </button> </div> <div class="Button-Container"> <button class="Button"> <i class="Icon"></i> </button> </div> </div> <button class="Reset">Reset</button>