CSS3 Flexbox: display: box vs. flexbox vs. flex

84

Wczoraj dostałem w szkole stronę internetową, która używa instrukcji CSS 3 flexbox. Nigdy wcześniej tego nie używałem. Więc poszukałem go trochę w Google i znalazłem wiele różnych stylów instrukcji flexbox.

Niektórzy piszą display: box;, inni używają display: flexbox;i inni display: flex;.

Więc jakie są różnice? Którego powinienem użyć?

css flexbox Peter Mortensen
źródło
7
Dokładny duplikat: stackoverflow.com/questions/15662578/…
cimmanon
Ale który z nich otrzyma najpierw zaakceptowaną odpowiedź ... Zabezpieczę Twoje zakłady na @cimmanon i opublikuję Twoją odpowiedź na oba!
andyb
3
Nie ma znaczenia, który jest zamknięty. Starsze pytanie można zamknąć, jeśli nowsze ma lepsze odpowiedzi. Spekuluję, że starsze pytanie, które zostało wysłane jako „pytanie i odpowiedź” dokładnie w tym samym czasie, albo nigdy nie zostanie zaakceptowane, albo OP zaakceptuje własną odpowiedź. Tak jak powiedziałem, zduplikowałbym tutaj twoją odpowiedź i zagłosowałbym za zamknięciem starszego jako duplikatu tego, zakładając, że OP zaakceptuje odpowiedź :-)
andyb
2
@andyb: Dla mnie obie odpowiedzi są tutaj lepsze, a także rozwiązanie ... Myślę więc, że moje pytanie nie powinno być zamknięte, nawet jeśli jest duplikatem.
2
@andyb: Ach! Jakoś to przegapiłem. Niedługo się tym zajmiemy. Dzięki.
BoltClock

Odpowiedzi:

154

To są różne style.
display: box;to wersja 2009.
display: flexbox;to wersja 2011.
display: flex;to aktualna wersja.

Cytat Paula Irisha

Ostrzeżenie: Flexbox przeszedł kilka poważnych zmian, więc ten artykuł jest nieaktualny. Podsumowując, stary standard (Flexbox 2009) , na którym oparty jest ten artykuł, został zaimplementowany w Chrome od v4, Firefox od v2 i IE10 beta.

Od tego czasu nowy standard flexbox zadebiutował i zaczął debiutować w Chrome 17. Stephan Hay napisał przewodnik po nowej implementacji flexboksa . Od tego czasu specyfikacja przeszła zmiany nazewnicze, które zaczęły pojawiać się w Chrome 21. Chrome 22 ma stabilną implementację najnowszej specyfikacji.

W tym momencie wdrożenie albo wiąże się z ryzykiem , więc bądź świadomy.

Oto blog o różnych oświadczeniach Flexbox.
To jest wpis na blogu autorstwa sztuczek css na temat różnych wersji.

Kiedy używam flexboksa, zawsze piszę to tak:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Edycja:
Nadal nie każdy ma przeglądarkę / urządzenie zdolne do przeglądania układów Flexbox. Tak więc, jeśli chodzi o rozwiązania awaryjne lub alternatywy, jest ten artykuł autorstwa Kenana Yusufa o tym, jak używać flexbox bez używania flexbox .

Michael Schmidt
źródło
kolejność deklaracji wydaje się mieć znaczenie. Pracowałem na starym chrome z Androidem, który obsługuje tylko -webkit-box, ta deklaracja musi być ostatnia, aby była skuteczna. Czy ktoś też tego doświadcza?
ken
3
@ Ken Nie, -webkit-boxjest na pierwszym miejscu. Twoja ostatnia deklaracja powinna zawsze być najnowszą lub zgodną ze standardem W3C. Jednak polecam -ms-flexboxpóźniej, -webkit-flexponieważ IE12 / Edge obsługuje -webkit-flex, ale technicznie chcesz, aby IE używał właściwego -ms-prefiksu zamiast -webkit-. Jest to jednak ogólna ostrożność, ponieważ jako display: flex; IE12 nie dotyczy tutaj.
hexalys
10

Specyfikacja przeszła wiele iteracji, patrz 2009 , 2012 , 2013 i za każdym razem, gdy wartość była zmieniana. display: flex;jest najnowszy.

Jest to nadal wersja robocza specyfikacji, więc każda obecna implementacja może ulec zmianie.

andyb
źródło
1

wyświetlacz: elastyczny; Jest to najnowsza i lepsza wersja, której obecnie możemy użyć w naszym kodzie.

Więc idź po to.

johnie
źródło