С помощью CSS3 элемента: дисплей: коробки и адаптируемых блоков и гибкий

вчера я стал веб-сайтом в школе, который использует заявление css3 flexbox. Я никогда не использовал это раньше. Поэтому я немного погуглил. И нашел много разных стилей операторов flexbox.
Некоторые ребята пишут display: box; некоторые использовать display: flexbox; и другие display: flex;.

Итак, каковы различия? Что я должен использовать?

4 58
css css3 flexbox

4 ответа:

это разные стили.
display: box; версия 2009 года.
display: flexbox; версия 2011 года.
display: flex; - Это текущая версия.

цитата пола Айриша

внимание: Flexbox претерпел некоторые серьезные изменения, так что эта статья это устарело. Таким образом,старый стандарт (Flexbox 2009), которым эта статья основана на том, что была реализована в Chrome начиная с v4, Firefox начиная с v2, и IE10 бета.

С тех пор новый стандарт flexbox дебютировал и начал дебютировать в Хром 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. Так что для резервных решений или альтернатив есть в этой статье Кенан Юсуф о том, как используйте flexbox без использования flexbox.

116

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

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

8

гибкие коробки, или flexbox, это новый режим компоновки в CSS3

использование flexbox гарантирует, что элементы ведут себя предсказуемо, когда макет страницы должен соответствовать различным размерам экрана и различным устройствам отображения

для многих приложений модель гибкой коробки обеспечивает улучшение по сравнению с блочной моделью в том, что она не использует поплавки, а поля контейнера flex не сворачиваются с полями его содержимого

<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>

выход :

enter image description here

2

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

Так что вперед.

0