Aligning and animating flex items

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

Box figure

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.

improperly aligned button

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

Asked on September 1, 2020 in CSS.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.