Многие из нас знают сегодня, что более старые значения свойства display, такие как inline и block, устарели после того, как в CSS3 была введена новая гибкая модель коробки. Но мы можем найти различную информацию в Интернете в той же гибкой коробке.
Мы могли бы найти в основном 3 разных значения свойства display, а именно flex, box и flexbox. В чем разница между этими тремя гибкими коробчатыми моделями и какой из них использовать?
Вы используете те, которые вам нужны для браузеров, которые вам нужны для поддержки.
display: boxНасколько я могу судить, обертка через box-lines: multiple не выполняется в любом браузере.
display: flexboxhttp://caniuse.com/#feat=flexbox (обратите внимание, что IE10 является единственным браузером, отмеченным как частичная поддержка, поддерживающая обертку)
Спецификации для flexbox и flex достаточно похожи, поэтому нет причин не включать их обоих, тем более, что IE10 поддерживает только спецификацию flexbox. Спецификация для box очень отличается и может не стоить включать в зависимости от эффекта, который вы после, хотя почти все свойства имеют аналог с теми, которые содержатся в спецификациях flexbox/flex.
Вы можете обнаружить, что есть несколько браузеров, поддерживающих несколько спецификаций. Вероятно, наступит время, когда они откажутся от поддержки более старой спецификации, поэтому всегда убедитесь, что вы включили свойства flex.
Насколько я знаю, вышеупомянутые три разные версии гибкой коробчатой модели можно классифицировать по возрасту.
display: box - Это была первая гибкая модель коробки, которая была принята в качестве самой новой модели в 2009 году. Не используйте ее.
display: flexbox - Эта гибкая модель коробки появилась в 2011 году, которая все еще находится в разработке. Не используйте его.
display: flex - это новейшая гибкая модель коробки, которая в настоящее время находит свое место в качестве последнего стандартного окна. Это может претерпеть некоторые изменения, но это предпочтительнее других двух стандартов.