Flexbox - rewolucja w świecie pudełek

F l e x b o xrewolucja w świecie pudełek

Marcin GajdaThe Software House

Prehistoria

Model tabelaryczny

Model tabelaryczny<table> <tbody> <tr> <td colspan="3">Header</td> </tr> <tr> <td style="width: 20%;">Sidebar</td> <td style="width: 60%;">Content</td> <td style="width: 20%;">Ad</td> </tr> </tbody></table>

Model tabelarycznyZalety:● nie ma problemów z ustawianiem wysokości● łatwe wyśrodkowywanie elementów● zachowują się w przewidywalny sposób

Wady:● wolne renderowanie dla dużych tabel● łatwo doprowadzić do bałaganu w kodzie● szablon na tabelach jest nie semantyczny

Era pływających pudełek

Model blokowy

Era pływających pudełek

<div>Header</div><div style="width: 20%; float: left;"> Menu</div><div style="width: 60%; float: left;"> Content</div><div style="width: 20%; float: left;"> Ad</div>

Model blokowyZalety:● przejrzysty i łatwy w utrzymaniu● elementy szybko się wyświetlają● pozwala nadać elementom semantyczne znaczenie

Wady:● utrudnione wyśrodkowywanie● gorsza elastyczność elementów● wymaga znajomości sztuczek

Flexbox● Stworzony z myślą o aplikacjach z zaawansowanym interfejsem (RIA)● Usprawnia układanie elementów w szablonach aplikacji● Ułatwia wyrównywanie elementów względem siebie● Pozwala lepiej wykorzystywać pustą przestrzeń

Wstawiamy flexboxa

.container{

display: flex; /* display: inline-flex */

}

.item{

/* automatycznie: */ /* display: flex-item; */

}

Domyślny wygląd:● układ horyzontalny● szerokość dopasowana do treści● wysokość wyrównana● elementy dosunięte do lewej

Kierunek układania

Kierunek układania

.container{

/* flex-direction: row; */

flex-direction: column;

}

Kierunek układania

.container{

/* flex-direction: row; */

flex-direction: column;

}

Kierunek układania (flex-direction)

column column-reverse

row

row-reverse

Zmiana kolejności

Zmiana kolejności

Zmiana kolejności

Zmiana kolejności

Zmiana kolejności

.menu { order: 1 }

.content { order: 2 }

.ad { order: 3 }

@media (max-width: 768px){ .menu { order: 1 } .content { order: 3 } .ad { order: 2 }}

Zmiana kolejności

.menu { order: 1 }

.content { order: 2 }

.ad { order: 3 }

@media (max-width: 768px){ .menu { order: 1 } .content { order: 3 } .ad { order: 2 }}

Kontrolowanie rozmiaru

flex-basis podstawowy rozmiar elementu(auto | 0 | px | em | percent | … )

flex-grow o jaką część element może się rozszerzyć względeminnych elementów korzystając z wolnego miejsca(liczba całkowita bez jednostki)

flex-shrink o jaką część element może się zmniejszyć względeminnych elementów korzystając z dostępnego miejsca(liczba całkowita bez jednostki)


.left { flex-grow: 0 }

.middle { flex-grow: 0 }

.right { flex-grow: 0 }



























.left { flex-basis: 300px; flex-shrink: 2; }

.middle { flex-basis: 300px; flex-shrink: 1; }

.right { flex-basis: 300px; flex-shrink: 1; }


/* flex: [flex-grow] [flex-shrink] [flex-basis]; */.avatar { flex: 0 0 100px; }.comment { flex: 1 0 400px; }


/* flex: [flex-grow] [flex-shrink] [flex-basis]; */.avatar { flex: 0 0 100px; }.comment { flex: 1 0 400px; }

Zawijanie elementów

.container{ /* flex-wrap: nowrap; */ flex-wrap: wrap;

/* flex-flow: [flex-direction] [flex-wrap] */ flex-flow: row nowrap;}

Zawijanie elementów (flex-wrap)

column column-reverse

row

row-reverse

Przykład

Przykład

.container{ display: flex; flex-flow: row wrap; max-width: 1024px;}

.header{ flex-basis: 100%;}

Przykład

.menu { flex: 0 1 100px; }

.content { flex: 1 1 auto; min-height: 200px; }

.ad { flex: 0 1 100px; }

@media screen and (max-width: 400px) { .container{ flex-direction: column; }}

Wyrównywanie

justify-content wypełnienie elementami w osi głównej

align-content wypełnienie rzędami w osi poprzecznej

align-items wyrównanie wszystkich elementów w osi poprzecznej(przypisywane kontenerowi)

align-self wyrównanie elementu w osi poprzecznej(przypisywane danemu elementowi)

Wyrównywanie (justify-content)

flex-start

flex-end

center

space-around

space-between

Wyrównywanie (justify-content)

justify-content: space-between

Wyrównywanie (align-content)

.container{ display: flex; flex-flow: column wrap; align-content: space-around;}

Wyrównywanie (justify-items)

flex-start

flex-end

center

stretch

baseline

Wyrównywanie (justify-items)

flex-start

flex-end

center

stretch

baseline

Wyrównywanie (align-self)

.container{ display: flex; align-items: flex-start;}.middle-item{ align-self: flex-end;}

.container{ display: flex; align-items: center; justify-content: center;}

.container{ display: flex; align-items: center; justify-content: center;}

Wsparcie?

Kłody pod nogi...● część przeglądarek wymaga prefiksów (-ms-, -webkit-)● brak wsparcia na IE8 i IE9● istnieją różne wersje specyfikacji flexboxa● pojedyncze błędy w obsłudze

Rozwiązania● gotowy framework dla flexboxa:

http://flexboxgrid.com/

● obejścia dla różnych problemów z flexboxem:https://github.com/philipwalton/flexbugs



Pytania?

@elektryk91