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

Question

我刚开始使用 Flexbox，在弄清楚如何做我想做的事情时遇到了一些麻烦。最终，我正在尝试构建一个漂亮的“控制面板”/HUD。这是我到目前为止所拥有的https://jsfiddle.net/1req8u25/ .

转载于此

#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>

这产生

这显然看起来很糟糕。我想要的是每一行占据所有必要的空间，以便将所有内容放入其中，每个左标签大小相同，每个 slider 宽度相同，每个右标签是大小相同。

这可能吗？

Answer 1

你可以为此使用 css 网格。

    .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; */
}

为

替换 flex 内容

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

grid-template-columns 表示每列的大小，在本例中 1fr 表示当前空间的 1 部分。

为了在右边对齐最后的标签，你可以使用来自 flexbox 的相同标签，在 .slider-value 里面放:

justify-self: end;

它将在右侧对齐文本。

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