Вчера у меня в школе появился веб-сайт, который использует утверждение 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-трюками о разных версиях.
Когда я использую flexbox, я всегда пишу его так:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Edit:
Все еще не все имеют браузер/устройство, способное просматривать макеты Flexbox. Итак, для альтернативных решений или альтернатив существует эта статья от Kenan Yusuf о том, как использовать Flexbox без использования flexbox.
Спецификация прошла через много итераций, см. 2009, 2012, 2013 и каждый раз, когда значение менялось. display: flex; это последний.
Это все еще черновая спецификация, поэтому любая текущая реализация может измениться.
дисплей: flex; Последняя и лучшая версия в настоящее время мы можем использовать в нашем коде.
Так что пойдите для этого.
Гибкие поля или flexbox - это новый режим макета в CSS3
Использование flexbox гарантирует, что элементы будут вести себя предсказуемо, когда макет страницы должен соответствовать разным размерам экрана и различным устройствам отображения.
Для многих приложений гибкая модель коробки обеспечивает улучшение по сравнению с моделью блока тем, что она не использует поплавки, а также не уменьшает границы гибких контейнеров с полями его содержимого.
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
Выход:
