Tutorial Flexbox

Question

Witam.Ostatnio zacząłem interesować się tworzeniem stron, ale stanąłem na css , a dokładnie na flexbox nwm jak mam korzystać z flexboxa , a dokładnie jak ustawiać elementy w danych miejscach.Moje pytanie brzmi tak :

Czy zna ktoś jakiś kurs dla totalnie początkujących z flexboxami oraz z css nie mam na myśli kursu gdzie są podane tylko komendy/funkcje czy jak to tam się zwie od flexboxa np. "justify-content" czy "align-items"  tylko np kogoś kto tworzy przykładową stronę i pokazuje gdzie jak co używać :)

Z góry dzięki :D

Comments

Najlepiej będzie jak sam sobie stworzyć stronę i spróbujesz jak co działa. To najlepsza nauka! A poradników do flexboxa na necie znajdziesz sporo.

---

Właśnie tak miałem zamiar zrobić.Zrobiłem już plan jak ma wyglądać mniej więcej strona

http://prntscr.com/l4bvaf

ale gdy doszedłem do bocznego indeksu to napotkałem problem ponieważ nie wiem jak zrobić żeby logo i nagłówek były na górze a indeks ustawiony z boku kombinowałem na różne sposoby z 2h ,a na koniec postanowiłem dodać obramowanie do każdego elementu aby zobaczyć gdzie jaki element  gdzie ma granice i okazało się że css jakby nie wykrywał indeksu :( ponieważ wszystko ma obramowanie a element indeks nie :(

 

kod do strony : https://jsfiddle.net/Marcins321/vfkn9de7/

---

@shotokan, zastanawiam się jeszcze czy nie zacząć od grid-a ponieważ tabelki jakoś lepiej do mnie przemawiają ,ale nie jestem pewien czy to dobry pomysł gdyż w internecie znalazłem opinie o tym że Grid jest o wiele trudniejszy od flexboxa :(

---

Ja bym zaczął od flexa bo jest lepiej wspierany przez przeglądarki, a Grid to taka "nowość".

---

wiesz co jednak zdecydowałem się na grida obejrzałem kilka tutoriali jak się w tym pisze i to mi bardziej odpowiada niż flexbox ,a co do wsparcia grid nie wspiera tylko opera mini :)

Answer 1

Może nie kompletny tutorial, ale pokazuje to co najczęściej się używa i sposób myślenia o flexboxie.

https://flexboxfroggy.com/#pl

Od tego samego developera jest też inna aplikacja webowa: https://cssgridgarden.com/#pl

uczy grida

Answer 2

  Dla początkującego świetne materiały ma The Net Ninja oraz m.in. koduje. 

The Net Ninja: https://www.youtube.com/watch?v=Y8zMYaD1bz0

Kodu.je: http://kodu.je/flexbox/wstep-osie-i-kierunki/

Comments

dzięki :)