Гибкое изменение ширины дочернего элемента flexbox - PullRequest
Новая
       54

Гибкое изменение ширины дочернего элемента flexbox

0 голосов
/ 06 августа 2020

Я пытаюсь изменить ширину гибких дочерних элементов в CSS, но мои целевые поля не меняются. В среднем флексбоксе я пишу только одно число, и длина тоже должна быть меньше. В любом случае длины трех флексбоксов практически одинаковы. Как я могу это сделать? 

.container{
    padding-right: 300px;
}
.row{
display: flex;
margin-top: 30px;

}
.col{
    border:0.5px solid #598BDA;
    padding: 10px;
    margin: 0 15px;
    min-height: 25px;
    outline: none;
}

input{
    text-align: center;
    font-size: 30px;
}

.col-2{
    flex-grow: 2;
}
.col-1{
    flex-grow:1;
}
<div class="container">
    <div class="row">
        <input class="col col-2" id="num1" value="1234567768" />
        <input class="col col-1" id="correct1"  />
        <input class="col col-2" id="summa1" value="333333" />
    </div>
    <div class="row">
        <input class="col col-2" id="num2" value="42354656577" />
        <input class="col col-1" id="correct2"/>
        <input class="col col-2" id="summa2" value="325453443" />
    </div>
    <div class="row">
        <input class="col col-2" id="num3" value="3255656213" />
        <input class="col col-1" id="correct3"/>
        <input class="col col-2" id="summa3" value="23545000" />
    </div>

</div>

Результат:

введите описание изображения здесь

Моя цель - уменьшить ширину среднего гибкого бокса . Как решить эту проблему?

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Ваше решение сработало бы, если бы столбцы не были входами, скажем, вместо этого, элементами div.

Проблема с входными данными в том, что они имеют ширину по умолчанию для размещения нескольких символов. Эта ширина будет вычисляться с использованием font-size, поэтому изменение font-size входных данных делает их больше.

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

<input size=2>

Введенный выше ввод будет иметь ширину для размещения двух символов.

Дополнительно, если то, что вы хотите, предназначено для первый и последний столбцы, чтобы занять оставшееся доступное пространство, вы можете дать им flex-grow: 1 и удалить flex-grow в центральном столбце (по умолчанию 0). 

.col-2  {
  /*flex-grow: 2;*/
  flex-grow: 1;
}

.col-1 {
  /*flex-grow: 1;*/
}
1 голос
/ 06 августа 2020

Чтобы работала функция flex-grow, вам необходимо указать ширину. Я добавил width: 0, и теперь столбцы 2-1-2

ПРИМЕЧАНИЕ Здесь они отображаются меньше из-за небольшого размера экрана (ваш класс контейнера имеет padding-right: 300px, поэтому нет t осталось много места). нажмите full page, чтобы увидеть правильный пример 

.container {
  padding-right: 300px;
}

.row {
  display: flex;
  margin-top: 30px;
}

.col {
  border: 0.5px solid #598BDA;
  padding: 10px;
  margin: 0 15px;
  min-height: 25px;
  outline: none;
  width: 0; /* add this */
}

input {
  text-align: center;
  font-size: 30px;
}

.col-2 {
  flex-grow: 2;
}

.col-1 {
  flex-grow: 1;
}
<div class="container">
  <div class="row">
    <input class="col col-2" id="num1" value="1234567768" />
    <input min="0" max="9" class="col col-1" id="correct1" />
    <input class="col col-2" id="summa1" value="333333" />
  </div>
  <div class="row">
    <input class="col col-2" id="num2" value="42354656577" />
    <input class="col col-1" id="correct2" />
    <input class="col col-2" id="summa2" value="325453443" />
  </div>
  <div class="row">
    <input class="col col-2" id="num3" value="3255656213" />
    <input class="col col-1" id="correct3" />
    <input class="col col-2" id="summa3" value="23545000" />
  </div>

</div>

В качестве альтернативы вы также можете указать ширину в%. Следующий фрагмент кода эквивалентен предыдущему 

.container {
  padding-right: 300px;
}

.row {
  display: flex;
  margin-top: 30px;
}

.col {
  border: 0.5px solid #598BDA;
  padding: 10px;
  margin: 0 15px;
  min-height: 25px;
  outline: none;
}

input {
  text-align: center;
  font-size: 30px;
}

.col-2 {
  width: 40%;
}

.col-1 {
  width: 20%;
}
<div class="container">
  <div class="row">
    <input class="col col-2" id="num1" value="1234567768" />
    <input min="0" max="9" class="col col-1" id="correct1" />
    <input class="col col-2" id="summa1" value="333333" />
  </div>
  <div class="row">
    <input class="col col-2" id="num2" value="42354656577" />
    <input class="col col-1" id="correct2" />
    <input class="col col-2" id="summa2" value="325453443" />
  </div>
  <div class="row">
    <input class="col col-2" id="num3" value="3255656213" />
    <input class="col col-1" id="correct3" />
    <input class="col col-2" id="summa3" value="23545000" />
  </div>

</div>
...