CSS3 + Flexbox = Koniec z FLOAT’ami (kiedyś)

UPDATE: uwaga, opisana w tym wpisie składnia została zdezaktualizowana najnowszymi zmianami w proponowanej specyfikacji!

Biorąc pod uwagę tempo, z jakim aktualizowane ostatnio są najważniejsze przeglądarki (o zgrozo, nawet IE) wszystko wskazuje na to, że już za chwilę będzie można zacząć stosować większość dobrodziejstw CSS3 nawet w komercyjnych projektach.

Ale w natłoku tych wszystkich wyskakujących po Sieci demówek bajeranckich box-shadow‚ów, text-shadow‚ów, transitions czy nawet interaktywnych obiektów 3D, łatwo było przeoczyć nowość o wiele bardziej, w moim mniemaniu, fundamentalną — nowy rodzaj wyświetlania elementów.

display: box

Na początek małe demo. Koniecznie oglądać w jakimś Webkicie (Chrome, Safari czy nawet Android). Póki co, Opera kompletnie tego nie rozumie, IE aż po wersję 8 też (może M$ doda obsługę w wersji 9). Firefox niby sobie radzi, ale gubi się w wielu miejscach (co ciekawe – włącznie z wersją 4 beta – skutkiem czego w tym demie nie widać np. będzie faktu, że box jest skalowalny – co zasadniczo pozbawia sensu cały temat 😉 ).

Powinno być widać coś takiego:

Na co warto zwrócić uwagę:

  • Nie ma tutaj żadnych floatów (!)
  • Równa wysokość niebieskich boxów jest dana „z automatu” – nie ma żadnych tricków CSS2.1 czy JS.
  • 3 niebieskie boxy są wyrównane w zielonym boksie do dołu — zielony box nie ma paddingu na górze!
  • Kolejność niebieskich boxów ustawiona jest w CSSie. W kodzie następują kolejno „child 1”, „child 2” i „child 3”.
  • „child 1” ma stałą szerokość, a „child 3” i „child 2” okupują pozostałą szerokość zielonego boxa w stosunku 3:1 (wszystko ustawione via CSS). Widać to dokładnie, kiedy ogląda sie demo w jakimś Webkicie i skaluje się okno przeglądarki.
  • Zielony box wycentrowany jest w przeglądarce w pionie i w poziomie – beż żadnych „margin:auto”, „position:absolute”, „left:50%;top:50%” czy ujemnych marginesów.

Ale jak?

Z wykorzystaniem kilku nowych, proponowanych w draftach (póki co, niestety) CSS3 atrybutów.

Zielony box (rodzic)

display:box
Nowa wartość display, która włącza model flexbox na elemencie, na którym jest ustawiona, i jego bezpośrednich dzieciach.
box-orient
Możliwe wartości: horizontal | vertical | inherit — definiuje jak wyświetlane są niebieskie boxy: horyzontalnie (tak jest ustawione w demie) czy wertykalnie.
box-pack
Możliwe wartości: start | end | center | justify — ustawia wyrównanie niebieskich boxów (dzieci) na osi zdefiniowanej przez wartość box-orient. Czyli jeśli w tym przypadku box-orient: horizontal, to chodzi o wyrówanie horyzontalne. Gdyby było box-orient: vertical, box-pack ustawiało by wyrównanie niebieskich boxów w pionie. Mała uwaga: na demie nie widać, że niebieskie boxy wyrównane tak naprawdę są do prawej, bo ze względu na ustawienie na dwóch z nich wartości box-flex — w sumie zajmują całą szerokość zielonego boxa.
box-align
Możliwe wartości: start | end | center | baseline | stretch. Odwrotność atrybutu box-pack — jeśli box-pack definiował wyrównanie horyzontalne, box-align będzie ustawiał wyrównanie wertykalne — i vice versa.

Niebieskie boxy (dzieci)

box-flex
Możliwe wartości: 0 | jakakolwiek liczba całkowita – ta wartość robi dwie rzeczy: włącza skalowalność boxa-dziecka i ustawia proporcje, w jakich dzieci (niebieskie boxy, w tym przypadku) będą wykorzystywały wolną przestrzeń w „rodzicu” (zielonym boksie). W demie 2 niebieskie boxy mają włączoną tą wartość: „child 3” ma box-flex: 3, a „child 2” ma box-flex: 1 — co oznacza, że oba będą skalowalne i będą wypełniały wolą przestrzeń w zielonym boksie (pozostałą po odjęciu szerokości „child 1”) w stosunku 3:1.
box-ordinal-group
Możliwe wartości: jakakolwiek liczba całkowita. Atrybut ten pozwala na zmianę kolejności wyświetlania boxów-dzieci (niebieskich) w stosunku do kolejności, jaką mają w kodzie. W demie boxy te mają kolejno: „child 1” — box-ordinal-group: 3, „child 2” — box-ordinal-group: 1 i „child 3” — box-ordinal-group: 2

Co jeszcze

To oczywiście nie wszystkie wartości (polecam poczytać źródła), jakie składają się na flexbox. Ale to już wystarcza, żeby w pełni zastąpić floaty, a nawet dodać developerom wiele nowych możliwości bez konieczności uciekania się do hacków. Kiedy tylko wszystkie podstawowe przeglądarki zaczną spójnie to obsługiwać, rzecz jasna (patrzę głównie na Ciebie, Firefoksie). Na razie za wesoło nie jest. IMHO zaznaczenie tam Firefoxa na zielono też jest nieco na zasadzie „wishful thinking”.

Źródła

Update

Zapomniałem dodać, że wszystkie te właściwości są obecnie w fazie eksperymentalnej, w zw. z czym trzeba stosować „przedrostki producenckie”, czyli:

display: box;

box-align: center;

box-pack: center;

…i tak dalej.

Update 2 (19-02-2013):

Jak słusznie zauważyli Komentujący, wpis i demo dość mocno się zdezaktualizowały. Cóż, tak się dzieje, kiedy próbuje się korzystać z nieukończonych specyfikacji. Jak się okazało, od czasu powstania tego wpisu, proponowana specyfikacja modułu Flex Box Layout zmieniła się… dwukrotnie. Zmieniając po drodze, oczywiście, składnię.

Pierwotnie, niniejszy wpis oparty był na propozycji z lipca 2009. Po drodze była zmiana składni w marcu 2012. Oraz obecnie (póki co) obowiązująca składnia z września 2012.

Jak zatem wygląda sprawa na dziś?

Pierwotna składnia (opisana w powyższym wpisie – lipiec 2009) cały czas działa w:

Składnia „przejściowa” (marzec 2012) działa tylko w Internet Explorer 10 (przynajmniej spośród przeglądarek, które mam zainstalowane).

Najnowsza zaś składnia (wrzesień 2012) działa w:

Nawiasem, zawsze można sprawdzić aktualny stan wsparcia dla tego modułu CSS na caniuse.com.

Komentarze

  1. Evan

    Dzięki ci za to ! Szczerze mówiąc zawsze miałem jakiś problem z floatami !! A co do IE oni raczej tego nie wprowadzą … potrzebowali kilku lat żeby zaokrąglone rogi wprowadzić pf…

  2. Pingback: Konkurs CSS – epilog

  3. GlitchMr

    „Dzięki ci za to ! Szczerze mówiąc zawsze miałem jakiś problem z floatami !! A co do IE oni raczej tego nie wprowadzą … potrzebowali kilku lat żeby zaokrąglone rogi wprowadzić pf…”

    Zdziwiłbyś się. IE10 obsługuje flexboxy :P.

  4. Lennox

    a mi to w ogole nie działa, konsola chrome’a wyświetla te parametry jako przekreślone, czyli niepoprawne i niedziałajace

  5. kabexxx

    Drogi autorze! Zapomniałeś dodać właściwości CSS z przedrostniek „-webkit”- dlatego to nie działa w Chrome. Poza tym przydałoby się dać także przedrostek „-o-” i „-ms-

    1. Kamil

      Racja – dodałem już przedrostki do pierwotnego dema, jak również dwa nowe pliki dema dla zaktualizowanych składni (na dole wpisu, Update 2).

  6. ZacnyUser

    Tak, wypadałoby zaktualizować CSS i nie siać zamętu. Ludzie wchodzą tu z Opery i się dziwią, że nie działa. Jak wszystkie atrybuty mają przedrostek webkit, to nie może działać.

    Wystarczająco dużo Google robi teraz pod górkę Operze, żeby jeszcze takim czymś ją dobijać.

    Ew. dać u góry informację, że artykuł nieaktualny i nie będzie aktualizowany.

    Pozdrawiam.

Dodaj komentarz