Гибкая модель коробки - дисплей: flex, box, flexbox?

Многие из нас знают сегодня, что более старые значения свойства display, такие как inline и block, устарели после того, как в CSS3 была введена новая гибкая модель коробки. Но мы можем найти различную информацию в Интернете в той же гибкой коробке.

Мы могли бы найти в основном 3 разных значения свойства display, а именно flex, box и flexbox. В чем разница между этими тремя гибкими коробчатыми моделями и какой из них использовать?

Ответы

Ответ 1

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

display: box

  • Firefox 2.0? (Приставка)
  • Chrome 4.0? (Приставка)
  • Safari/iOS 3.1? (Приставка)
  • Android 2.1 (префикс)

Насколько я могу судить, обертка через box-lines: multiple не выполняется в любом браузере.

display: flexbox

  • Chrome 17-?? (Приставка)
  • Internet Explorer 10 (префикс)

display: flex - текущий стандарт

  • Хром 21 (префикс), 29 (без префикса)
  • Opera 12.1 (без префиксов), 15 (префикс webkit)
  • Firefox 22 (без префикса)
  • Safari/iOS 7 (префикс)
  • Blackberry 10 (префикс)
  • Internet Explorer 11 (без изменений)

http://caniuse.com/#feat=flexbox (обратите внимание, что IE10 является единственным браузером, отмеченным как частичная поддержка, поддерживающая обертку)

Спецификации для flexbox и flex достаточно похожи, поэтому нет причин не включать их обоих, тем более, что IE10 поддерживает только спецификацию flexbox. Спецификация для box очень отличается и может не стоить включать в зависимости от эффекта, который вы после, хотя почти все свойства имеют аналог с теми, которые содержатся в спецификациях flexbox/flex.

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

Ответ 2

Насколько я знаю, вышеупомянутые три разные версии гибкой коробчатой ​​модели можно классифицировать по возрасту.

  • display: box - Это была первая гибкая модель коробки, которая была принята в качестве самой новой модели в 2009 году. Не используйте ее.

  • display: flexbox - Эта гибкая модель коробки появилась в 2011 году, которая все еще находится в разработке. Не используйте его.

  • display: flex - это новейшая гибкая модель коробки, которая в настоящее время находит свое место в качестве последнего стандартного окна. Это может претерпеть некоторые изменения, но это предпочтительнее других двух стандартов.