Każdy aktualny samouczek dotyczący modułu Flexbox?

Question

Wiem, że specyfikacja Flexible Box Layout module została zmieniona, a niektóre przeglądarki obecnie implementują więcej niż jedną wersję (używając różnych składni). Szukałem informacji, ale mogę znaleźć samouczki z ostrzeżeniami, że są one obecnie nieaktualne.

Wiem, że specyfikacja może się zmienić, ale mam nietypowy przypadek użycia (rozszerzenie Chrome) i chcę go używać w obecnej formie. Chcę tylko wiedzieć, jak korzystać z najnowszej wersji zaimplementowanej w Chrome.

Czy ktoś wie o aktualnym samouczku?

Answer 1

Oto najlepszy flexbox tutorial Znalazłem do tej pory, jest bardzo dobrze wyjaśnione lub jeśli potrzebujesz głębszego wyjaśnienia sprawdź w3c draft.

W celu przetestowania i lepszego zrozumienia modelu flexbox sprawdź to flexbox playground.

Answer 2

Moduły Flexbox nie są jeszcze nieaktualne. Wdrożenie nowego modelu zajmie trochę czasu, prawdopodobnie rok do wdrożenia.

W3C zawsze posiada dokumentację dotyczącą standardów, a także uwagi dotyczące rzeczy, które mogą nie zostać wdrożone.

Oto aktualny Flexbox Layout Module.

Oto szkic edytora nowej specyfikacji Flexbox Layout Module 2012.

Answer 3

Dzięki uprzejmości html5please.com, wygląda na to, że specyfikacja Flexbox jest uważana za stabilną i istnieją samouczki na numerach Opera i Mozilla.

Uwaga Nie jestem pewien, czemu html5please nadal zaleca się unikać. Jego tekst wydaje się sugerować coś przeciwnego.

Answer 4

Ponieważ wdrożenie zmieniło się w przeszłości, znane są 2 główne implementacje Flexbox. This page podaje pewne podstawowe informacje o starej i nowej implementacji.

Znalazłem dobry samouczek dotyczący bieżącego stanu wdrożenia Flexbox here.

przykład kod HTML struktury strony (demo on Codepen here)

<div class="page-wrap"> 

    <section class="main-content" role="main"> 
    Main content: first in source order 
    </section> 

    <nav class="main-nav" role="navigation"> 
    Links 
    </nav> 

    <aside class="main-sidebar" role="complementary"> 
    Sidebar 
    </aside> 

</div> 

Aby podzielić page-wrap w trzech elementów z main-nav razy tak duży jak paski boczne, można było wykorzystać flexbox. Kolejną zaletą jest to, że pozycja elementu main-content w DOM jest przed main-nav, ale dzięki flexbox możemy renderować go przed treścią. Jest to użyteczne dla czytników ekranu, więc zawartość jest odczytywana jako pierwsza.

Musimy sprawić, aby page-wrap był kontekstem flexbox. W ten sposób wszystkie dzieci stają się elementami flexbox:

.page-wrap { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

Kolejność właściwości jest ważna. Ponieważ niektóre przeglądarki obsługują obie implementacje, musimy określić najnowsze właściwości poniżej starych właściwości. Wynika to z tego, że właściwość display nie jest prefiksowana.

Aby dodać Szerokości elementów:

.main-content { 
    width: 60%; 
} 
.main-nav, 
.main-sidebar { 
    -webkit-box-flex: 1;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-flex: 1;   /* OLD - Firefox 19- */ 
    width: 20%;    /* For old syntax, otherwise collapses. */ 
    -webkit-flex: 1;   /* Chrome */ 
    -ms-flex: 1;    /* IE 10 */ 
    flex: 1;     /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

Ostatnią rzeczą, jaką musimy zrobić, to zmienić kolejność elementów, bo teraz main-nav staje po main-content

.main-content { 
    -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-ordinal-group: 2;  /* OLD - Firefox 19- */ 
    -ms-flex-order: 2;    /* TWEENER - IE 10 */ 
    -webkit-order: 2;    /* NEW - Chrome */ 
    order: 2;      /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 
.main-nav { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1;  
    -ms-flex-order: 1;  
    -webkit-order: 1; 
    order: 1; 
} 
.main-sidebar { 
    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3;  
    -ms-flex-order: 3;  
    -webkit-order: 3; 
    order: 3; 
}