Flexbox Froggy - gierka pozwalająca nauczyć się jak działa flexbox w HTML 5

Z pomocą żabek i zadań o rosnącym poziomie trudności, można nauczyć się jak działa ten bardzo potężny ficzer html5 - flexbox :) Bardzo mi to przypomina "CSS selector game", który również znajdziecie w powiązanych.

[jestem_specjalista_od_spraw]

Można używać, tylko trzeba wiedzieć jak ( ͡° ͜ʖ ͡°)


I nawet pod IE10 niestraszne :)

[metaxy]

@jestem_specjalista_od_spraw: Danke, się sprawdzi.

[u.....a]

Fajne, ale support nie powala. Dziękujemy ci M$.

caniuse

[metaxy]

Świetnie, tylko póki co IE ma flexbox w du... poważaniu (bug na bugu i bugiem pogania + wersja 2012). Więc fajna sprawa, acz musi poczekać na pełne wsparcie.

[metaxy]

otóż nie musi

@support: Powiedz to klientowi. Skoro 10 i 11 nie obsługują (jak trzeba), to mało który klient Ci powie "lej na to". A robienie równolegle dwóch wersji przypomina mi czasy IE6...

[metaxy]

są zamknięte środowiska gdzie np. używa się tylko okrojonego Firefoxa

@support: Jasne kolego. Ale powiedz mi jaki to jest procent projektów? Nie będę strzelał, ale baaaardzo mały.

[GienekBandyta]

@noisy co ma html5 do cssowego flexboksa?

[GienekBandyta]

@rukh: Nie, nie są. Poza canvasem.

[noisy]

@edward_szatera: IE 9+? Współczuję takiego projektu :P W moim obecnym projekcie musimy się martwić tylko o najnowsze wersje przeglądarek... i nagle koduje się łatwo :)

[grabarzchaosu_pl]

Znasz jeszcze jakieś gry do nauki?

[metaxy]

Znasz jeszcze jakieś gry do nauki?

@grabarzchaosu_pl: Jak nie zawołasz @noisy to pewnie nie zauważy.

[uczalka]

@grabarzchaosu_pl: @Linuksiarz1: Ja mogę od siebie polecić kursy na Khan Academy, a szczególnie "Intro to JS: Drawing and Animation" - fajne, proste zadania do wykonania, przechodzi się trochę jak grę i można się pobawić w rysowanie kodem. :)

[sim_co]

Moim zdaniem można już używać Can I use...
Można się posiłkować np.: Juiced - Flexbox CSS Framework

Oczywiście czasami trafia się na bugi, no ale żadna nowość ;)

[metaxy]

Moim zdaniem można już używać Can I use...

@sim_co: No więc właśnie kolego:

Partial support is due to large amount of bugs present (see known issues)

[zychu69]

Trochę już siedzę w branży i pamiętam lata gdy musiałem zapewniać wsparcie nawet pod IE6/IE7. Od tamtego czasu z każdym rokiem koduje się lżej, ale flexbox jeszcze długo będzie tematem na gierki i wyląduje często w kategorii nowinek i testów, a nie realnych zastosowań.

A jeśli ktoś się uprze i wdroży flexa + zajmie się implementacją fallbacków pod IE, to zajmie to więcej czasu niż po prostu stworzenie layoutu 'po bożemu'.

Uważam,

[zychu69]

@filipsworks: ale standardy i wytyczne to ja szanuję, miałem na myśli tylko rozsądne zachowanie kompatybilności.

z resztą swego czasu jak byłem na studiach i obowiązywały w miarę odświeżone standardy W3C, to wykładowca na przedmiocie nie przyjął projektu na divach.. 'to jest źle, na tabelkach miało być'... także masz jedną z prawdopodobnych genez problemu.

[l.....e]

@filipsworks: Teraz robię przy 10 letnim (dużym) onepage, GWT. Cały layout na tabelach. To dopiero jest koszmar momentami.

[Mardos]

Level 24 - jakby ktoś miał problem:
flex-wrap: wrap-reverse;
flex-direction: column-reverse;
align-content:space-between;
justify-content:center;

[Mardos]

@Frytek2000: masz tutaj nawet w jednej ( ͡° ͜ʖ ͡°)
flex-wrap: wrap-reverse;flex-direction: column-reverse;align-content:space-between;justify-content:center;

jak można w 3 komendy. To pokaż ?

[thisway]

@Mardos:
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

w trzech, drobna różnica.

[a.....u]

Flexbox jest nielegalny...

[Z.....0]

Świetne! Nauka poprzez zabawę to naprawdę idealne rozwiązanie.
Przypomniał mi się żółw. :)