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)
Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }
Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }
Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }
Kontrolowanie rozmiaru
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }
Kontrolowanie rozmiaru
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }
.left { flex-grow: 1 }
.middle { flex-grow: 2 }
.right { flex-grow: 1 }
Kontrolowanie rozmiaru
.left { flex-basis: 300px; flex-shrink: 2; }
.middle { flex-basis: 300px; flex-shrink: 1; }
.right { flex-basis: 300px; flex-shrink: 1; }
Kontrolowanie rozmiaru
/* flex: [flex-grow] [flex-shrink] [flex-basis]; */.avatar { flex: 0 0 100px; }.comment { flex: 1 0 400px; }
Kontrolowanie rozmiaru
/* 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