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ć?
Odpowiedzi:
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 .
-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.