Flexbox - przykłady

Cześć!

Zauważyłem że mimo iż nauczyłem się sporej ilości atrybutów flexboxa to mam problem z użyciem ich w praktyce.
Pomimo tego że w odrealnionym przykładzie wszystko działa jak należy to nie umiem znaleźć zastosowania wielu atrybutów do rzeczywistego projektu.

Proszę was o podanie mi linków do repozytoriów ludzi którzy używają flexboxa do pojektowania prostych, estetycznych layout'ów, takich na których mógłbym się czegoś nauczyć.

Z góry dziękuję!

używanie flexa nie jest obowiązkowe, ot poręczne narzędzie jak coś zmieniasz, ale na co dzień raczej większość korzysta z gotowego grida, a mękę stylowania zostawia na poważniejsze rzeczy ;)

Może przećwicz na: https://flexboxfroggy.com/

nie umiem znaleźć zastosowania wielu atrybutów do rzeczywistego projektu

Zwykle nie ma potrzeby używania większości atrybutów.

Przećwiczyłem już. Umiem wszystko poza ostatnim poziomem. Chodziło mi o zobaczenie jak to działa na tle jakiegoś większego projektu.

Ja ucząc się flexboxa z internetu nie bardzo go czaiłem. W sensie wiedziałem o co chodzi, widziałem tę żabę ale na apce z androidu i podobnie jak Ty nie pomysłu gdzie coś takiego zastosować.

Do momentu aż musiałem napisać interfejs z następującymi wymaganiami:

1. Ekran ma być nieprzewijalny.
2. Na jego środku ma wygenerować się widok na podstawie pobranego JSONa (json zawiera dodatkowe właściwości określające proporcje komponentów - w stylu komponant A ma się powiększać 5 razy bardziej niż komponent B).
3. Struktura jsona jest drzewiasta i tym samym ten sam widok może zawierać w sobie inne pod widoki (o analogicznej budowie), czyli np. wewnątrz czatu może być np. zdjęcie i osadzony kolejny czat.

Bez flexboxa naprawdę ciężko byłoby mi to uzyskać.

Takie moje luźne przemyślenia (nie wykorzystywałem flexa w żadnych poważnych zastosowaniach).

1. Gdyby strona https://css-tricks.com/snippets/css/a-guide-to-flexbox/ była zrobiona we flexboksie (nomen-omen), flexbox umożliwiłby podzielenie jej na te dwie widoczne połowy.
2. Własności flex-direction użyłbym do odwrócenia kolejności zdjęć w galerii.
3. Własności flex-wrap użyłbym do zawijania zdjęć w galerii (gdyby było ich więcej niż ekran); patrz np. usługa Archive w serwisie Tumblr, tu przykład – tylko na Tumblr raczej użyłbym flexboksa w pionie.
4. Własności justify-content, align-content oraz align-items użyłbym do wyśrodkowania/wyrównania zdjęć w galerii, gdyby była albo jednoliniowa – to justify-content (np. sekcja "Zdjęcia powiązane" pod zdjęciem głównym, jak mają zdjęcia na pixabay.com), albo wieloliniowa – to align-content. align-items odpowiada wyrównaniu zdjęć również w pionie, gdy jest używane wyrównanie w poziomie (lub odwrotnie, jak mniemam, gdy się zmieni flex-direction).
5. Własność order wykorzystałbym np. do cyklicznej zmiany kolejności zdjęć w galerii (zmienia się jedną klasę na drugą w CSS zamiast położenie elementów DOM). Przykładowo, co 10 minut czy codziennie.
6. Własności flex-grow oraz flex-basis wykorzystałbym na przykład do ustalenia poziomego rozmiaru sekcji na stronie (może być i pionowy, ale ten zazwyczaj ma wartość zależną od zawartości). Powiedzmy, panel środkowy ma być 2 razy większy niż panele lewy i prawy. Zobacz np. panele na http://www.portal-pisarski.pl/ (choć nie wiem, czy jest tam coś z flexboksa).
7. Własność flex-shrink – hm, ciekawe. Nic mi nie przychodzi na razie do głowy.
8. Własność align-self wykorzystałbym do przeniesienia np. przycisku menu na lewo od logo w nagłówku strony (jeśli nie użyć do tego justify-content: space-between, gdyby były jedynie dwa elementy w nagłówku).

http://jonibologna.com/flexbox-cheatsheet/