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

Question

[Александр]

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


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

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

Спасибо.

Comments

[Kuat Mustafin]

Можно, смотрите в сторону FlexBox => frontender.info/a-guide-to-flexbox

Answer 1

[Дмитрий]

<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;
}

Answer 2

[Даулет Ногайбек]

Можно попробовать сделать display:block; на блок поиска

Answer 3

[Андрей Федоров]

codepen.io/aliencash/pen/gPKQax

Comments

[Дмитрий]

олдскульно... но гемора то сколько -))))

[Андрей Федоров]

Дмитрий: Честно говоря мне уже не нравится, хотя написал 10 минут назад. Calc - это все же не очень олдскульно. У flex'а поддержка лучше...

Answer 4

[Sanches]

А у меня вот так получилось: codepen.io/abnmt/pen/EPGzjj

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