Вчера я получил в школе веб-сайт, который использует оператор Flexbox CSS 3. Я никогда не использовал это раньше. Итак, я немного погуглил и нашел много разных стилей операторов flexbox.
Кто-то пишет display: box;, кто-то пользуется display: flexbox;, а кто-то display: flex;.
Так в чем же отличия? Что мне следует использовать?
Ответы:
Это разные стили.
display: box;это версия 2009 года.
display: flexbox;это версия 2011 года.
display: flex;это актуальная версия.
Цитата Пола Айриша
Предупреждение: Flexbox претерпел несколько серьезных изменений, поэтому эта статья устарела. Таким образом, старый стандарт (Flexbox 2009) , на котором основана эта статья, был реализован в Chrome с версии 4, Firefox с версии 2 и бета-версии IE10.
С тех пор дебютировал новый стандарт flexbox, который начал дебютировать в Chrome 17. Стефан Хэй написал руководство по новой реализации flexbox . С тех пор в спецификации были внесены изменения в именование, которые начали появляться в Chrome 21. Chrome 22 имеет стабильную реализацию последней спецификации.
На этом этапе реализация любого из них сопряжена с риском , так что имейте в виду .
Вот блог о различных операторах flexbox.
Это запись в блоге css-tricks о различных версиях.
Когда я использую flexbox, я всегда пишу так:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Изменить: по-
прежнему не у всех есть браузер / устройство, способное просматривать макеты flexbox. Поэтому для резервных решений или альтернатив есть статья Кенана Юсуфа о том, как использовать flexbox без использования flexbox .
-webkit-boxпервом месте. Ваше последнее объявление всегда должно быть самым последним или стандартом W3C. Однако я бы рекомендовал -ms-flexboxпосле, -webkit-flexпотому что IE12 / Edge поддерживает -webkit-flex, но технически вы хотите, чтобы IE использовал свой правильный -ms-префикс вместо -webkit-. Это общая придирка с осторожностью, поскольку display: flex; IE12 здесь не влияет.