Przeglądając Githuby i cudze projekty natknąłem się na mega patent na zrobienie layoutu kolumnowego całej strony w Flexboksie. Zazwyczaj do tego lepszy byłby grid, ale ok. Analizujemy.
Dobra, więc mamy jakiś tam reset stylów:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Autor jeszcze font awesome zaimportował i w tagu html wrzucił fonta, mniejsza. Teraz mamy body:
body {
min-height: 100vh;
background-color: #333;
color: #fff;
padding: 1rem;
display: flex;
flex-direction: column;
}Nadaliśmy wysokość na cały viewport (minimum), display flex i direction column. To zręby naszego layoutu, teraz elementy będą pokazywać się jeden pod drugim.
My w body zrobimy sobie tag main i on będzie zarówno flex-dzieckiem (body) jak i flex-rodzicem (dla innych elementów). Tak to wygląda:
main {
flex-grow: 1;
margin: auto;
width: 100%;
max-width: 800px;
display: flex;
flex-flow: column nowrap;
}Może od razu nie czujemy, jak genialne to rozwiązanie, więc rozpiszę:
- Gdyby nie margin auto, main nie byłby wycentrowany (w flex kontenerze marginy centrują i pion i poziom, warto pamiętać)
- Gdyby nie flex grow 1, main nie urósł by ani w dół ani do góry (no chyba, że bez margin auto, wtedy byłby w pozycji 0,0, ale też w dół by nie rósł)
- Jako, że main jest dzieckiem flex layoutu kolumnowego, flex grow dotyczy rośnięcia w height. Zatem potrzebne jest width 100%, aby nam urósł w bok powyżej swój kontent
- Z drugiej strony… potrzebne jest max-width 800px, no chyba, że chcemy, aby rozlał się nam na całą stronę
- Jest też rodzicem flexowym
- Jego dzieci też są stackowane w kolumnach z nowrap, ma być tylko jeden pod drugim (takie mocno mobilne podejście)
- Jeżeli chcemy gdzieś poustawiać coś obok siebie, to robimy tam kolejne dziecko, będące rodzicem (już z row) i mamy elementy obok siebie
Polecam pobawić się czymś takim, bo patent jest mega. Więcej CSS niedługo!
