如何对齐弹性框元素并使它们具有相同的大小？

Question

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

并在此处转载

price

#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%;
}

这产生

显然很糟糕。我想要的是每一行要占用所有必要的空间以适合其中的所有内容，每个左侧标签的尺寸相同，每个滑块的宽度相同，每个右侧标签为相同的大小。

有可能吗？

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表示当前空间的一部分。

要在右侧对齐最后一个标签，可以使用来自flexbox的相同标签， 在.slider-value中放置：

justify-self: end;

它将使文本在右侧对齐。

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

Answer 2

首先，您的容器总宽度太小。每个部分都一样（对于slider-value，只有10％不够。

我也将p替换为div，因为它不是用标签包裹的段落，并且不需要垂直空间。

#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

对于CSS表格布局来说，这似乎是完美的案例。请注意，每个input都用p标签包裹。

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