justify-content not working properly on buttons - html

Question

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 class="button-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>

Answer 1

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 class="button-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 class="button-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>

Answer 2

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 class="button-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>