justify-content not working properly on buttons-CodePudding

I have 3 buttons nested within a parent container. The parent container has display:inline-flex, but the justify-content: space-between property isn't working. The buttons have a max-width defined (since justify-content can only work when there's empty space available). At this point, when I try different values for justify-content (space-between, space-around, center, etc) the grouping of buttons is moved around, but the individual buttons never separate. I've tinkered with this for a while, and read through a bunch of StackOverflow answers, but nothing has worked so far. Any help is appreciated! I have a codepen for testing things out. It's a simplified version of my angular code.

Just to fully document my issue here is the relevant code from production and a screenshot:

.loop-container {
  display: inline-flex
  flex-direction: row
  justify-content: space-between
  align-items: center
}

button {
  height: 30px
  flex: 1
}

.cancel {
  background-color: red
}

.home {
  background-color: blue
}

.small {
  max-width: 75px
}

.large {
  max-width: 140px
  }

<ng-container >
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
  </ng-container>

CodePudding user response：

Edited answer: Don't use display: inline-flex, but display: flex on the flex container. That way the flex container will be 100% wide by default.

Also, you wrote about justify-content: space-between not working, but in your code you have justify-content: center (?). I changed that to space-between in my snippet to show the effect.

.loop-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

button {
  height: 30px flex: 1
}

.cancel {
  background-color: red
}

.home {
  background-color: blue
}

.small {
  max-width: 75px
}

.large {
  max-width: 140px
}

<ng-container >
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>

You might also want to try space-around, which will leave some space at the far right and left too:

.loop-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

button {
  height: 30px flex: 1
}

.cancel {
  background-color: red
}

.home {
  background-color: blue
}

.small {
  max-width: 75px
}

.large {
  max-width: 140px
}

<ng-container >
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>

CodePudding user response：

If you're looking to have a gap between all the buttons then you'll have to add the margin, Justify content doesn't add a space between elements, it just moves the content based on your property values.

.loop-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

button {
  height: 30px;
  flex: 1;
  white-space: nowrap;
  margin-right: 0.25rem;
}

button:last-child {
  margin-right: 0;
}

.cancel {
  background-color: red;
}

.home {
  background-color: blue;
}

.small {
  max-width: 75px;
}

.large {
  max-width: 140px;
}

<ng-container >
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>