0

Facing flexbox column alignment issue. Don't know how to fix it by myself. so gone through below SO threads, but unfortunately nothing works for me.

Solution 1
Solution 2

Currently using Angular 11x version for development. I've created REUSEABLE table component using Angular material, which is working fine. Here the problem is, am showing action icons based on conditions. some time there is a scenario to show only ONE or TWO icons at a time, where am seeing some unwanted HUGE gaps between two icons like below.

enter image description here

Want to resolve this gap issue for below scenarios

  1. if single icon - it should be aligned with Action header in Center
  2. if two icons - it should be aligned with Action header with decent gap.

Could someone tell me what am doing wrong here? or it would be much appreciated if someone help me to find out proper and better solution .

my css

.align-user-action {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
}

expectation

       item 1   item 2  

item 1 item 2   item 3 item 4 

       item 1   item 2

minimal stackblitz example

Thanks to everyone

Jade
  • 59
  • 1
  • 8
  • could you please create a https://stackoverflow.com/help/minimal-reproducible-example it is not exactly clear what you are expecting. – Crocsx Dec 01 '21 at 07:42
  • to be clear @Crocsx i want to eliminate extra gaps in 1st and 3nd row and center align the action items as 2nd row. updated my expectation kindly look into that – Jade Dec 01 '21 at 08:10
  • @Crocsx I've added minimal example – Jade Dec 01 '21 at 09:08
  • Have you tried using `space-around` or `space-evenly` instead of `space-between`? [justify-content | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) – Richard Deeming Dec 01 '21 at 09:25
  • @RichardDeeming yeah currently am using `space-between` but showing single icon scenario, how can show it in center of the row ? i mean to permission header. pls check my reproducible example – Jade Dec 01 '21 at 09:40
  • Basically you can't using space-between. I suggest you rethink your approach. – Paulie_D Dec 01 '21 at 10:00
  • @Paulie_D Honestly saying. I'm not that much expert in css. thats why im seeking help. if possible kindly provide me some other way – Jade Dec 01 '21 at 10:21

0 Answers0