Flexbox против таблиц, зачем нам flexbox?

Кто-нибудь может просветить меня о том, как новая модель макета Flexbox лучше, чем текущие таблицы? (дисплей: таблица и все они включены в мой случай)?

Это не поддерживается вообще при IE10, что не очень хорошо для ближайшего будущего, и я просто не вижу никаких преимуществ по сравнению с табличным макетом. Тем не менее, Интернет начинает наполняться "поклонниками" этого нового метода компоновки CSS, и все примеры, которые я вижу, можно легко сделать с помощью обычного css без проблем.

Обновление 25.12.15:

Я много использую flexboxes с тех пор, как их познакомили с современными браузерами, и прекратил использовать display:table и т.д., Потому что flexboxes более мощные и простые в использовании.

Ответы

Ответ 1

Есть три различия, которые я могу представить между использованием flexbox и использованием табличных значений отображения или поплавков для компоновки страницы:

  • Возможность переупорядочивать элементы независимо от исходного кода HTML, сохраняя элементы в нормальном потоке - вы можете сделать это, указав целочисленное значение с помощью order.
  • Это требует меньше набора текста, чем традиционные плавающие макеты (вам не нужны все псевдоэлементы для целей очистки) и более семантичен, а использование плавающих или таблиц для макетов, очевидно, не таково.
  • Способность гибких элементов расти и сжиматься для заполнения горизонтального и вертикального пространства на основе размеров элементов предка - с помощью свойств flex-grow и flex-shrink.

Проблема (как вы указали) заключается в том, что поддержка по-прежнему довольно плохая; Фактически Firefox по-прежнему внедряет более старую версию модуля flexbox, поэтому вам приходится учитывать незначительные расхождения в синтаксисе и поведении, в зависимости от того, какой браузер вы используете. Однако было сказано немного, что это будущее для макетов, особенно для сложных веб-приложений, которые появляются чаще. Стоит учиться, если вы в порядке с неизбежным разумным инвестированием - ценой того, что на данный момент не используется.

Я также предлагаю вам взглянуть на эту потрясающую статью в журнале для дружественного введения в flexbox (это довольно недавно написано)

Ответ 2

Проще говоря, это то, что будет полезно через несколько лет. Как и многие продвинутые методы CSS, HTML5 и т.д., Несколько человек усыновят их с болезненными резервами и прокладками /shivs в течение следующих нескольких лет.

Когда браузеры будут поддерживать его в будущем, у нас будет сторона и все ненавидят "старые" браузеры, которые их не поддерживают:).

Ответ 3

Модель Flexbox более мощная, чем таблица отображения. Flexbox поддерживает макеты для языков справа налево, например. И да, действительно, Flexbox немного сложнее и что входной барьер. Плагины с плавающей запятой и clearfix являются (умным) взломом, так же, как и табличные макеты - это взлом, Flexbox предназначен для макета.

В последнее время улучшается поддержка браузеров, некоторые говорят, что мы должны использовать его сейчас. Однако Bootstrap 3 не использует flexbox, но я могу представить, что следующая версия будет.