Elastyczny model skrzynkowy - wyświetlacz: flex, box, flexbox?

Question

Wielu z nas wie dzisiaj, że starsze wartości nieruchomości jak inline i blockdisplay są przestarzałe po nowy model elastyczny pudełko zostało wprowadzone w CSS3. Ale możemy znaleźć różne informacje w Internecie w tym samym modelu elastycznej skrzynki.

Możemy znaleźć głównie 3 różne wartości właściwości display, a mianowicie flex, box i flexbox. Jaka jest różnica między tymi trzema elastycznymi modelami pudełkowymi, a których użyć?

Answer 1

Używasz tych, których potrzebujesz do przeglądarek, które potrzebujesz obsługiwać.

display: box

• Firefox 2.0? (Z prefiksem)
• Chrome 4.0? (Z prefiksem)
• Safari/iOS 3.1? (Z prefiksem)
• Android 2.1 (z prefiksem)

O ile mogę powiedzieć, owijając poprzez box-lines: multiple nie jest realizowane w dowolnej przeglądarce.

display: flexbox

• Chrome 17- ?? (Prefiks)
• Internet Explorer 10 (prefiks)

display: flex - aktualny poziom

• Chrom 21 (prefiks), 29 (prefiksu)
• Opera 12.1 (prefiksu), 15 (WebKit prefiksu)
• Firefox 22 (prefiksu)
• Safari/iOS 7 (prefiks)
• Blackberry 10 (prefiks)
• Internet Explorer 11 (prefiksu)

http://caniuse.com/#feat=flexbox (Zauważ, że IE10 jest tylko przeglądarka oznaczone jako mające częściowe wsparcie, które obsługuje zawijanie)

specyfikacje dla flexbox i flex są podobne na tyle nie ma reaso n nie do włączenia obu, zwłaszcza, że ​​IE10 obsługuje tylko specyfikację flexbox. Specyfikacja dla box jest bardzo różna i może nie być warta uwzględnienia w zależności od efektu, jaki masz na sobie, chociaż prawie wszystkie właściwości mają analogię do tych, które można znaleźć w specyfikacjach flexbox/.

Może się okazać, że niektóre przeglądarki obsługują wiele specyfikacji. Najprawdopodobniej nadejdzie czas, w którym odrzucą obsługę starszej wersji specyfikacji, więc zawsze pamiętaj o dodaniu właściwości flex.

Answer 2

O ile wiem, powyższe trzy różne wersje modelu elastycznego skrzynki mogą być klasyfikowane według ich wieku.

1. display: box - To był pierwszy elastyczny model box, który został przyjęty jako najnowszego modelu około roku 2009. Nie należy go używać.

2. display: flexbox - Ten elastyczny model pudełkowy pojawił się w roku 2011, który wciąż był w fazie rozwoju. Nie używaj go.

3. display: flex - Jest to najnowszy model elastycznego pudełka, który obecnie znajduje swoje miejsce jako najnowszy standard pudełkowy. Może to ulec dalszym zmianom, ale jest to preferowane w stosunku do pozostałych dwóch standardów.