Flexbox для макета страницы?

Question

Я пытаюсь понять, если я должен начать использовать flexbox для дизайна макета веб-сайта/webapp, а не для плавающих div и т. Д.

Но я получаю смешанные сообщения. На одном сайте они говорят, что Flexbox теперь «Святой Грааль» для разметки страниц: http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Но Tab Atkins, парень, который создал CSS3 гибкую спецификацию имеет страницу под названием «Почему flexboxes не хороша для макет страницы» http://www.xanthir.com/blog/b4580

Я смотрел видео об этом: http://vimeo.com/98746172

Так что мой вывод заключается в том, что он означает, что он не должен быть использован для сложных макетов страниц. И этот дисплей: сетка будет лучше подходит. Однако сетка, вероятно, займет еще несколько лет, чтобы охватить все популярные браузеры.

Итак, мой вопрос заключается в том, что на данный момент это гибкий интерфейс для создания макетов страниц, чем текущие решения (div floats, display: table-cell, inline-blocks и т. Д.) И является flexbox, что я должен использовать пока сетка не выйдет?

p.s Я знаю, что flexbox несовместим со старыми браузерами. Но я говорю гипотетически здесь, потому что этот вопрос просто предположим, что это не проблема.

Answer 1

Я думаю, что вы неправильно поняли Филиппа в решении, разрешенном Flexbox. Он не сказал, что flexbox был святым граалем для макетов, сам макет называется святым Граалем.

Вкладка сделала несколько хороших моментов, но это не значит, что flexbox - это не лучшее решение, которое мы имеем в настоящее время для определенных макетов.

Простота

Будет Flexbox сделать ваш HTML или CSS более кратким, проще понять или поддерживать? Использование flexbox может позволить вам избавиться от взломов, таких как удаление пробелов на элементах встроенного блока или для дополнительной разметки часто требуется display: table.

Performance

Flexbox элементы немного медленнее, чтобы сделать, чем плавали или встроенный блок элементов. Однако, если у вас нет сотен гибких боксов на вашей странице, это одна из последних вещей, о которых вам нужно подумать при оптимизации скорости вашей страницы. Иногда использование flexbox может значительно уменьшить количество CSS.

Гибкость

Flexboxes являются очень гибкими (каламбур не предусматривается). Вы можете делать такие вещи, как переупорядочивание порядка элементов, которые могут быть очень трудными или невозможными с помощью других методов.

При выполнении простых вещей, таких как расположение двух столбцов, я все равно использовал бы поплавок. Тем не менее, если вам нужна функциональность, которую предлагает Flexbox для вашего макета, или это упрощает ваш HTML или CSS, то идите на это! Макеты сетки могут быть лучше подходят в долгосрочной перспективе, но они еще не реализованы в большинстве браузеров.