CSS3 Flexbox: отображение: поле против гибкого бокса против гибкого

84

Вчера я получил в школе веб-сайт, который использует оператор Flexbox CSS 3. Я никогда не использовал это раньше. Итак, я немного погуглил и нашел много разных стилей операторов flexbox.

Кто-то пишет display: box;, кто-то пользуется display: flexbox;, а кто-то display: flex;.

Так в чем же отличия? Что мне следует использовать?

css flexbox Питер Мортенсен
источник
7
Точный дубликат: stackoverflow.com/questions/15662578/…
cimmanon
Но какой из них первым получит принятый ответ ... Я сделаю ваши ставки @cimmanon и отправлю ваш ответ обоим!
Andyb
3
Неважно, что закрыто. Старый вопрос можно закрыть, если на новый ответ лучше. Я предполагаю, что более старый вопрос, который был размещен как «вопрос и ответ» в одно и то же время, либо никогда не будет принят, либо OP примет свой собственный ответ. Как я уже сказал, я продублирую ваш ответ здесь и проголосую за то, чтобы закрыть более старую как копию этого, при условии, что OP принимает ответ :-)
andyb
2
@andyb: Для меня здесь есть оба ответа, лучшие ссылки, а также решение ... Так что я думаю, что мой вопрос не должен закрываться, даже если это дубликат.
2
@andyb: А! Я как-то упустил это. Мы позаботимся об этом в ближайшее время. Благодарю.
BoltClock

Ответы:

154

Это разные стили.
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 .

Майкл Шмидт
источник
последовательность объявления кажется важным. Я работал над старым Android Chrome, который поддерживает только -webkit-box, это объявление должно быть последним, чтобы действовать. Кто-нибудь тоже испытывает это?
ken
3
@ Кен Нет, на -webkit-boxпервом месте. Ваше последнее объявление всегда должно быть самым последним или стандартом W3C. Однако я бы рекомендовал -ms-flexboxпосле, -webkit-flexпотому что IE12 / Edge поддерживает -webkit-flex, но технически вы хотите, чтобы IE использовал свой правильный -ms-префикс вместо -webkit-. Это общая придирка с осторожностью, поскольку display: flex; IE12 здесь не влияет.
hexalys
10

Спецификация прошла через множество итераций, см. 2009 , 2012 , 2013, и каждый раз значение менялось. display: flex;последний.

Это все еще черновик спецификации, поэтому любая текущая реализация может измениться.

Эндиб
источник
1

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

Так что дерзайте.

Джонни
источник