Сообщество разработчиков

2 Вопрос: как заставить ввод растягиваться до 100% в flexbox div с помощью justify-content center

вопрос создан в Wed, May 8, 2019 12:00 AM

Я не могу получить ввод во фрагменте ниже, чтобы растянуть на 100% содержащую кнопку, не делая что-то вроде width: 150%

р> 

.explore__column,
.explore__row {
  display: flex;
}

.explore__row {
  flex-direction: row;
  flex: 1 1;
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
}

.search-box__item.search-box__active {
  border-top: 2px solid #4f9bc9;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12);
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
}
<div class="explore__row"><button class="search-box__item search-box__active" type="button"><div class="search-box__translate"><svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-Plan" style="overflow: visible;"></use></svg></div><div class="search-box__fade
"><input type="text" autocomplete="off" class="input__default form-control" placeholder="search Plans"></div><h2>One</h2></button><button class="search-box__item" type="button"><div class="search-box__translate"><svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-BusinessUnit" style="overflow: visible;"></use></svg></div><div class="search-box__fade"><input type="text" autocomplete="off" class="input__default form-control" placeholder="search Business Units"></div><h2>Two</h2></button>
</div>
    
1
2 ответа                              2                         
  1. Вы не можете использовать <div> внутри элемента кнопки (зачем вообще использовать кнопку в этом случае? Это заставляло ваш контент покачиваться при каждом нажатии на него)
  2. Просто добавьте ширину 100% к входу, а также к его родительскому элементу, и добавьте box-sizing: border-box, чтобы учесть также отступы.

р> 

.explore__column,
.explore__row {
  display: flex;
}

.explore__row {
  flex-direction: row;
  flex: 1 1;
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
  padding: 0 10px;
}

.search-box__item.search-box__active {
  border-top: 2px solid #4f9bc9;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12);
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
}

.search-box__fade,
input {
  width: 100%;
  box-sizing: border-box;
}
<div class="explore__row">
  <div class="search-box__item search-box__active" type="button">
    <div class="search-box__translate">
      <svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-Plan" style="overflow: visible;"></use></svg>
    </div>
    <div class="search-box__fade">
      <input type="text" autocomplete="off" class="input__default form-control" placeholder="search Plans"></div>
    <h2>One</h2>
  </div>
  <div class="search-box__item" type="button">
    <div class="search-box__translate">
      <svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-BusinessUnit" style="overflow: visible;"></use></svg>
    </div>
    <div class="search-box__fade">
      <input type="text" autocomplete="off" class="input__default form-control" placeholder="search Business Units">
    </div>
    <h2>Two</h2>
  </div>
</div>
    
0
2019-05-08 15: 56: 03Z
  1. Я использовал кнопку, чтобы она была вкладкой, а также для доступности, я бы подумал, что это должна быть кнопка
    2019-05-08 15: 58: 04Z
  2. Ну, кнопка - это то, что может быть нажато и обычно запускает действие. И кнопка не должна включать в себя поле ввода, так как при фокусировке ввода щелчком также будет нажата кнопка. Входы могут получать фокус /вкладываться самостоятельно, поэтому они уже доступны.
    2019-05-08 15: 59: 30Z

Удалите flex-direction: column из элемента .search-box__item. И добавьте этот фрагмент кода: 

.search-box__item {
    flex-wrap: wrap;
}

.search-box__fade {
    width: 100%;
}

input {
    width: 100%;
    box-sizing: border-box;
}
    
0
2019-05-08 15: 55: 46Z
источник размещен Вот
Другие вопросы
2
Вызов метода после завершения ThreadPool.QueueUserWorkItem
спросил 7 месяцев назад
1
приватное чтиво и публичное чтение в gundb
спросил 7 месяцев назад
1
jQuery извлекает данные из БД и выполняет итерацию каждого элемента массива для отображения в шаблоне
спросил 7 месяцев назад