librown
@librown
На-все-руки-мастер и немного кодер

3 колонки динамической ширины, центральную растянуть на 100% ширины. Как?

Привет!
Верстаю адаптивную шапку.
16e1dfdee3.png

1. колонка с логотипом фиксированная - 200px
2. центральная колонка с полем поиска
3. справа колонка динамической ширины, в зависимости от ширины окна показываются/скрываются некоторые иконки.

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

Спасибо.
  • Вопрос задан
  • 1218 просмотров
Пригласить эксперта
Ответы на вопрос 4
@DP-Studio
20 лет веб-разработки
<div class="box">
  <div class="logoblock">
     asdas        
  </div>
  <div class="searchblock">
    asdsd

  </div>
  <div class="buttonblock">
    sdsd
  </div>
  <div class="buttonblock">
    ffffff
  </div>
  <div class="buttonblock">
    ddddd
  </div>
  <div class="buttonblock">
    dddddd
  </div>
</div>


.box {
	display: flex;
	height: 300px;
	width: 100%;
	background: red;
}
.logoblock{
   flex-basis: 300px;
   flex-shrink: 0;
   background:green;
}
.searchblock{
	flex-basis: 100%;
}
.buttonblock {
   flex-basis: 200px;
   flex-shrink: 0;
   width: 200px;
   border: 2px solid #fff;
   background:orange;
}
Ответ написан
Комментировать
Можно попробовать сделать display:block; на блок поиска
Ответ написан
Комментировать
Sanches
@Sanches
А у меня вот так получилось: codepen.io/abnmt/pen/EPGzjj

Это если есть чёткое понимание при какой ширине сколько и какие кнопки показывать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $
PERX Нижний Новгород
До 50 000 ₽