如何对齐我的 flexbox 元素并使它们大小相同？

Question

I'm just starting out using Flexbox and having a little bit of trouble figuring out how to do what I'd like. Ultimately I'm trying to build a nice looking "control panel" / HUD. Here's what I have so far https://jsfiddle.net/1req8u25/ .

And reproduced here

 #sliders-container { position: absolute; top: 0; right: 0; margin: 20px; padding: 5px; background-color: #333333; display: flex; flex-flow: column wrap; justify-content: space-around; align-items: flex-start; } .slider-container { margin: 2px; padding: 2px; flex: 0 0 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .slider-label { margin: 2px; padding: 2px; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: small; color: white; flex: 0 0 40%; } .slider { margin: 2px; padding: 2px; flex: 0 0 50%; } .slider-value { margin: 2px; padding: 2px; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: small; color: white; flex: 0 0 10%; }

 <div id="sliders-container"> <div class="slider-container"> <p class="slider-label">foo</p> <input class="slider" min="0" max="100" type="range"> <p class="slider-value">10</p> </div> <div class="slider-container"> <p class="slider-label">foo-bar-baz</p> <input class="slider" min="0" max="100" type="range"> <p class="slider-value">0</p> </div> <div class="slider-container"> <p class="slider-label">quuuuuuuuuuuuux</p> <input class="slider" min="0" max="100" type="range"> <p class="slider-value">0.0000001</p> </div> </div>

This produces

Which obviously looks bad. What I'd like is for each row to take up all necessary space in order to fit everything inside of it, for each left label to be the same size, for each slider to be the same width, and for each right label to be the same size.

Is that possible?

Answer 1

You can use css grid for that.

    .slider-container {
  margin: 2px;
  padding: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; */
}

replacing the flex content for

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

grid-template-columns says the size of each column, in this case 1fr means 1 part of the current space.

for align the last labels on the right, you can use the same tags from flexbox, inside .slider-value put:

justify-self: end;

it will align the text on the right side.

https://jsfiddle.net/6pz7sjxq/3/

Answer 2

First, your total container width is too small. Same goes for each section (10% might not be enough for the slider-value .

I'd also replace the p with div since it's not a paragraph you're wrapping with the tag and you don't need it to have vertical space.

 #sliders-container { position: absolute; top: 0; right: 0; margin: 20px; padding: 5px; background-color: #333333; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; box-sizing: border-box; width: 400px; } .slider-container { margin: 2px; padding: 2px; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .slider-label { margin: 2px; padding: 2px; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: small; color: white; flex: 0 0 30%; } .slider { margin: 2px; padding: 2px; flex: 0 0 50%; } .slider-value { margin: 2px; padding: 2px; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: small; color: white; flex: 0 0 20%; } 

 <div id="sliders-container"> <div class="slider-container"> <div class="slider-label">foo</div> <input class="slider" min="0" max="100" type="range"> <div class="slider-value">10</div> </div> <div class="slider-container"> <div class="slider-label">foo-bar-baz</div> <input class="slider" min="0" max="100" type="range"> <p class="slider-value">0</p> </div> <div class="slider-container"> <div class="slider-label">quuuuuuuuuuuuux</div> <input class="slider" min="0" max="100" type="range"> <div class="slider-value">0.0000001</div> </div> </div> 

Answer 3

It looks like perfect case for CSS table layout. Note, wrapped each input with a p tag.

 .sliders-container { display: table; } .slider-container { display: table-row; } .slider-container p { display: table-cell; vertical-align: middle; margin: 0; } 

 <div id="sliders-container"> <div class="slider-container"> <p class="slider-label">foo</p> <p><input class="slider" min="0" max="100" type="range"></p> <p class="slider-value">10</p> </div> <div class="slider-container"> <p class="slider-label">foo-bar-baz</p> <p><input class="slider" min="0" max="100" type="range"></p> <p class="slider-value">0</p> </div> <div class="slider-container"> <p class="slider-label">quuuuuuuuuuuuux</p> <p><input class="slider" min="0" max="100" type="range"></p> <p class="slider-value">0.0000001</p> </div> </div>