Задать значения flex, чтобы метка отображалась правильно при небольшой ширине контейнера?

Question

В следующей форме метка вдоль левого столбца будет иметь правильный размер, пока не будет достаточно места. Затем этикетки сжимаются. Но когда в строке есть 3 элемента, размер метки отличается от размера строки с 2 элементами.

body {
  font-family: Arial;
  font-size: 12px;
}

.input1 {
  flex: 1;
}
.row {
  flex-direction: row;
  display: flex;
  flex: 1;
  align-items: center;
}
span {
  width: 120px;
}
.main {
  width: 200px;
}
.group {
  border: 1px solid rgba(0,0,0,.25);
}

.shrinkSameAmount {
  width: 52px;
  min-width: 52px;
}

<p>Full Size:</p>

<div class="group">
  <div class="row"><span>ID</span><input class="input1"/></div>
  <div class="row"><span>ID</span><input class="input1"/><button>X</button></div>
</div>

<p>Reduced Size:</p>

<div class="main group">
  <div class="row"><span>ID</span><input class="input1"/></div>
  <div class="row"><span>ID</span><input class="input1"/><button>X</button></div>
</div>


<p>What I want when reduced:</p>

<div class="main group">
  <div class="row"><span class="shrinkSameAmount">ID</span><input class="input1"/></div>
  <div class="row"><span class="shrinkSameAmount">ID</span><input class="input1"/><button>X</button></div>
</div>

Есть ли способ, которым я могу сохранить ширину надписей одинаковым, независимо от того, является ли ширина области просмотра большой или маленькой?

Answer 1

Сначала добавьте min-width:0 к элементу ввода и кнопке, чтобы позволить им сжаться.Затем вы можете отрегулировать flex-basis, чтобы убедиться, что один вход или кнопка и вход будут иметь одинаковое значение.

В приведенном ниже примере значение равно 300px.Если вход один, он примет все это как flex-basis.С помощью кнопки значение будет разделено между

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 12px;
}

.input1 {
  min-width: 0;
  flex-basis: 210px;
  flex-grow: 1;
}

.input1:last-child {
  flex-basis: 300px;
}

button:last-child {
  flex-basis: 90px;
  max-width: 90px;
  min-width: 0;
  padding: 1px 0;
  flex-grow: 1;
}

.row {
  flex-direction: row;
  display: flex;
  flex: 1;
  align-items: center;
}

span {
  flex-basis: 120px;
}

.group {
  border: 1px solid rgba(0, 0, 0, .25);
  width: 100%;
  animation: change 5s linear infinite alternate;
}

@keyframes change {
  to {
    width: 18%;
  }
}

<p>Full Size:</p>

<div class="group">
  <div class="row"><span>ID</span><input class="input1" /></div>
  <div class="row"><span>ID</span><input class="input1" /><button>X</button></div>
</div>

^{При небольшой ширине наблюдается небольшое смещение, я разберусь с этим.}

Answer 2

Flexbox обеспечивает определенную гибкость, которую необходимо контролировать в этом случае. Я изменил ваши <span> s на <label> элементы и добавил этот CSS:

label {
  flex: 0 0 120px;
}

Здесь значение flex является сокращением для flex-grow: 0, flex-shrink: 0, flex-basis: 120px. Свойство flex-based - это начальная ширина, задайте для нее любое значение, которое вы бы хотели, чтобы этот «столбец» меток был.

Чтобы поля соответствовали ширине контейнера, я изменил правило для входных данных:

.input1 {
  width: 100%;
  flex-shrink: 1;
}

Это заставляет входы использовать все доступное пространство.

body {
  font-family: Arial;
  font-size: 12px;
}
label {
  flex: 0 0 120px;
}
.input1 {
  width: 100%;
  flex-shrink: 1;
}
.row {
  flex-direction: row;
  display: flex;
  align-items: center;
}
.main {
  width: 200px;
}
.group {
  border: 1px solid rgba(0,0,0,.25);
}

<p>Full Size:</p>

<div class="group">
  <div class="row"><label>ID</label><input class="input1"/></div>
  <div class="row"><label>ID</label><input class="input1"/><button>X</button></div>
</div>

<p>Reduced Size:</p>

<div class="main group">
  <div class="row"><label>ID</label><input class="input1"/></div>
  <div class="row"><label>ID</label><input class="input1"/><button>X</button></div>
</div>