flexbox - rewolucja w świecie pudełek
TRANSCRIPT
![Page 1: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/1.jpg)
F l e x b o xrewolucja w świecie pudełek
Marcin GajdaThe Software House
![Page 2: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/2.jpg)
Prehistoria
Model tabelaryczny
![Page 3: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/3.jpg)
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>
![Page 4: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/4.jpg)
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
![Page 5: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/5.jpg)
Era pływających pudełek
Model blokowy
![Page 6: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/6.jpg)
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>
![Page 7: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/7.jpg)
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
![Page 8: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/8.jpg)
![Page 9: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/9.jpg)
![Page 10: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/10.jpg)
![Page 11: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/11.jpg)
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ń
![Page 12: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/12.jpg)
Wstawiamy flexboxa
.container{
display: flex; /* display: inline-flex */
}
.item{
/* automatycznie: */ /* display: flex-item; */
}
![Page 13: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/13.jpg)
![Page 14: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/14.jpg)
Domyślny wygląd:● układ horyzontalny● szerokość dopasowana do treści● wysokość wyrównana● elementy dosunięte do lewej
![Page 15: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/15.jpg)
Kierunek układania
![Page 16: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/16.jpg)
Kierunek układania
.container{
/* flex-direction: row; */
flex-direction: column;
}
![Page 17: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/17.jpg)
Kierunek układania
.container{
/* flex-direction: row; */
flex-direction: column;
}
![Page 18: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/18.jpg)
Kierunek układania (flex-direction)
column column-reverse
row
row-reverse
![Page 19: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/19.jpg)
Zmiana kolejności
![Page 20: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/20.jpg)
Zmiana kolejności
![Page 21: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/21.jpg)
Zmiana kolejności
![Page 22: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/22.jpg)
Zmiana kolejności
![Page 23: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/23.jpg)
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 }}
![Page 24: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/24.jpg)
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 }}
![Page 25: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/25.jpg)
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)
![Page 26: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/26.jpg)
Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }
![Page 27: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/27.jpg)
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 }
![Page 28: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/28.jpg)
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 }
![Page 29: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/29.jpg)
Kontrolowanie rozmiaru
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }
![Page 30: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/30.jpg)
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 }
![Page 31: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/31.jpg)
Kontrolowanie rozmiaru
.left { flex-basis: 300px; flex-shrink: 2; }
.middle { flex-basis: 300px; flex-shrink: 1; }
.right { flex-basis: 300px; flex-shrink: 1; }
![Page 32: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/32.jpg)
Kontrolowanie rozmiaru
/* flex: [flex-grow] [flex-shrink] [flex-basis]; */.avatar { flex: 0 0 100px; }.comment { flex: 1 0 400px; }
![Page 33: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/33.jpg)
Kontrolowanie rozmiaru
/* flex: [flex-grow] [flex-shrink] [flex-basis]; */.avatar { flex: 0 0 100px; }.comment { flex: 1 0 400px; }
![Page 34: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/34.jpg)
Zawijanie elementów
.container{ /* flex-wrap: nowrap; */ flex-wrap: wrap;
/* flex-flow: [flex-direction] [flex-wrap] */ flex-flow: row nowrap;}
![Page 35: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/35.jpg)
Zawijanie elementów (flex-wrap)
column column-reverse
row
row-reverse
![Page 36: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/36.jpg)
![Page 37: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/37.jpg)
Przykład
![Page 38: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/38.jpg)
Przykład
.container{ display: flex; flex-flow: row wrap; max-width: 1024px;}
.header{ flex-basis: 100%;}
![Page 39: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/39.jpg)
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; }}
![Page 40: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/40.jpg)
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)
![Page 41: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/41.jpg)
Wyrównywanie (justify-content)
flex-start
flex-end
center
space-around
space-between
![Page 42: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/42.jpg)
Wyrównywanie (justify-content)
justify-content: space-between
![Page 43: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/43.jpg)
Wyrównywanie (align-content)
.container{ display: flex; flex-flow: column wrap; align-content: space-around;}
![Page 44: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/44.jpg)
Wyrównywanie (justify-items)
flex-start
flex-end
center
stretch
baseline
![Page 45: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/45.jpg)
Wyrównywanie (justify-items)
flex-start
flex-end
center
stretch
baseline
![Page 46: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/46.jpg)
Wyrównywanie (align-self)
.container{ display: flex; align-items: flex-start;}.middle-item{ align-self: flex-end;}
![Page 47: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/47.jpg)
![Page 48: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/48.jpg)
.container{ display: flex; align-items: center; justify-content: center;}
![Page 49: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/49.jpg)
.container{ display: flex; align-items: center; justify-content: center;}
![Page 50: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/50.jpg)
Wsparcie?
![Page 51: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/51.jpg)
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
![Page 52: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/52.jpg)
Rozwiązania● gotowy framework dla flexboxa:
http://flexboxgrid.com/
● obejścia dla różnych problemów z flexboxem:https://github.com/philipwalton/flexbugs
![Page 53: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/53.jpg)
![Page 54: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/54.jpg)
![Page 55: Flexbox - rewolucja w świecie pudełek](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55c7a5c0bb61ebce178b460f/html5/thumbnails/55.jpg)
Pytania?
@elektryk91