Вчора я отримав веб-сайт у школі, який використовує твердження CSS 3 flexbox. Я ніколи раніше цим не користувався. Тож я трохи погуглив і знайшов багато різних стилів операторів flexbox.
Деякі хлопці пишуть display: box;, деякі використовують display: flexbox;і інше display: flex;.
То які відмінності? Що я повинен використовувати?
Відповіді:
Це різні стилі.
display: box;є версією 2009 р.
display: flexbox;є версією 2011 р.
display: flex;є фактичною версією.
Цитата Пола Ірландського
Попередження: Flexbox зазнав деяких основних змін, тож ця стаття застаріла. Підводячи підсумок, старий стандарт (Flexbox 2009) , на якому базується ця стаття, був впроваджений у Chrome з v4, Firefox з v2 та IE10 beta.
З тих пір новий стандарт 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-. Це загальна обережність, хоча як дисплей: flex; тут не впливає IE12.