Как сделать такое используя flex?

Question

[InterestingPerson]

Подскажите как сделать такой макет используя flex (height не работает почему-то)?

Answer 1

[Александр Зачиналов]

подойдет? jsfiddle.net/hxb0o7vs

Comments

[Александр Зачиналов]

если что не забудьте через autoprefixer прогнать стили

[InterestingPerson]

не совсем, надо, чтобы футер был прижат к низу.

[Денис]

InterestingPerson в примере Александр Зачиналов измените значение высоты у элемента .wrap на height: 100vh;

[Александр Зачиналов]

единицы vh не держат старые и некоторые мобильные браузеры, можно делать так jsfiddle.net/hxb0o7vs/3 InterestingPerson: ах это футер))) а в середине что у вас? там будет другое решение, если что

[Михаил Чирский]

Александр Зачиналов: width: 100% в body лишний, у вас из-за этого горизонтальный скрол)

[Александр Зачиналов]

нет, скролл горизонтальный? потому что забыл маржин обнулить у body - jsfiddle.net/hxb0o7vs/3

[Александр Зачиналов]

виноват, забыл апнуть - jsfiddle.net/hxb0o7vs/4

[Денис]

единицы vh не держат старые и некоторые мобильные браузеры

Александр Зачиналов это наверно такая шутка? ))) Значит, то, что flexbox не поддерживается старыми браузерами - это нормально, а vh, который даже в девятом осле поддерживается - это уже проблема? ))

[Александр Зачиналов]

да, проблема, потому что одно не кроссбраузерное решение не дает, на мой взгляд, права накручивать еще что-то лишний раз. Вы знаете какая поддержка заявлена в проекте автора? Если бы он указал поддержку, я бы слова не сказал. Я не против vh, я за сам факт предупреждения, если даю совет, всегда стараюсь предупредить о подводных камнях, зачем писать vh, когда можно написать на одно два свойства больше и спать спокойно. И почему вы забываете про мобильные браузеры? на андройд 4.2 например flex работает, а vh - нет. Лучше пересказать, чем не недосказать...это уже, как минимум, прилично.

[KevinBert]

The way i see it ,Length units represent a percentage of the current viewport dimensions: width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax). lovedog measurements for support .

[Carlos Tert]

Why do these elements have these extra styles applied to them even me for such a long time when I started working with flexible layouts. Services.

Answer 2

[Михаил Чирский]

Как то так?
jsfiddle.net/hxb0o7vs/2