Как я могу выровнять свои элементы 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>

Это производит

Что, очевидно, выглядит плохо.Я хотел бы, чтобы каждая строка занимала все необходимое пространство, чтобы вместить все внутри нее, чтобы каждая левая метка была одинакового размера, чтобы каждый ползунок был одинаковой ширины, и чтобы каждая правая метка была одинаковой.такой же размер.

Возможно ли это?

Answer 1

Во-первых, ваша общая ширина контейнера слишком мала.То же самое относится к каждому разделу (10% может быть недостаточно для slider-value.

. Я бы также заменил 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 2

Это выглядит как идеальный случай для 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>

Answer 3

Для этого вы можете использовать сетку 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/