Как сделать адаптивное меню между двумя блоками?

Question

[timbird]

Добрый день!
у меня в шапке 3 блока
1. Логотип
2. Меню
3. Контактная информация
я задал им display: inline-block, чтобы они выстроились в горизонтальную линию
1 и 3 блоку я задал фиксированную ширину 200 px
Хочу чтобы блок 2 Меню занимал все оставшееся свободное пространство, а если пункты меню внутри этого блока не убираются в одну строку на экране, они должны смещаться вниз на вторую строку. При этом крайний блок 3 с контактной информацией не должен переноситься на вторую строку.
Какие стили нужно задать?

Answer 1

[Сергей Горячев]

https://jsfiddle.net/webirus/4f5Lz4c7/
Так?

Comments

[timbird]

Почти, только пункты меню прежде чем перескачить на вторую сроку по идеи должны выстроиться в столбик. Т.е. этот вопрос решается только float'ом?

[timbird]

У меня получилось только если logotip задать float: left; если display: inline-block то меню сразу перескакивает на вторую строку полностью, как у Вас в примере.

[Сергей Горячев]

timbird: перестраивание в столбик, это уже media-запросы.

Answer 2

[Владимир]

frontender.info/a-guide-to-flexbox

Comments

[Владимир]

Ну и чтобы не мучаться с префиксами browserify.org