如何解决 CSS flexbox 中的 justify 内容问题？ 间隔不能正常工作

Question

EDIT: Turns out my code works. I just was using a smaller screen computer to view the code. Once I moved it to a larger sized screen the space-between worked completely fine. I thought I was going crazy, but figured out the issue

For some reason, my justify-content: space-between isn't separating my items. The h1, button, and select tags in the.controls class are all next to each other when they should be spaced out with space-between

Here is my HTML & CSS and under.controls class justify-content space between isn't spacing the items. Note I also have 2 other sections in my HTML labeled snare and hihat, but the HTML above is only showing the kick section

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; } i, svg { pointer-events: none; }.kick-pad, .snare-pad, .hihat-pad { width: 5rem; height: 5rem; margin: 1rem 0.5rem; cursor: pointer; }.hihat-track, .snare-track, .kick-track { display: flex; align-items: center; width: 70%; justify-content: space-between; margin-top: 4rem; }.sequencer { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; }.kick, .snare, .hihat { display: flex; }.controls { display: flex; justify-content: space-between; align-self: center; flex: 1; margin: 0rem 2rem; }.controls button { padding: 1rem; border: none; background: rgb(88, 88, 88); color: white; font-size: 1rem; cursor: pointer; transition: all 0.5s ease; }.pad { transition: all 0.5s ease; }.play { padding: 1rem 2rem; font-size: 1.5rem; background: rgb(88, 88, 88); border: none; color: white; cursor: pointer; margin-top: 3rem; } select { padding: 1rem; font-size: 1rem; }

 <div class="sequencer"> <div class="kick-track"> <div class="controls"> <h1>Kick</h1> <button data-track="0" class="mute kick-volume"> <i class="fas fa-volume-mute"></i> </button> <select name="kick-select" id="kick-select"> <option value="./sounds/kick-classic.wav">Classic Kick</option> <option value="./sounds/kick-808.wav">808 Kick</option> <option value="./sounds/kick-heavy.wav">Kick Heavy</option> </select> </div> <div class="kick"> <div class="pad kick-pad b0"></div> <div class="pad kick-pad b1"></div> <div class="pad kick-pad b2"></div> <div class="pad kick-pad b3"></div> <div class="pad kick-pad b4"></div> <div class="pad kick-pad b5"></div> <div class="pad kick-pad b6"></div> <div class="pad kick-pad b7"></div> </div> </div>

Here is an image of what it current looks like and I don't know why they are stuck side by side even though I am using justify-content:space-between.

Answer 1

I would recommend adding some kind of width to the class like

.controls { width: 20vw; } .controls { width: 20vw; } or .controls { width: 100%; } .controls { width: 100%; }