środa,
Układ Flexbox
Flexible Box Layout to stosunkowo nowa możliwość kaskadowych arkuszy stylów. Według serwisu caniuse.com jest ona obecnie w pełni wspierana przez ponad 95% przeglądarek stron internetowych, w tym wszystkie najpopularniejsze. Kolejne kilka procent programów zapewnia częściową kompatybilność. Flex dostarcza wiele własności, w prezentowanym przykładzie wykorzystano zaledwie jedną. W odróżnieniu od elementów pływających (float), Flexbox został opracowany specjalnie w celu definiowania układu elementów HTML.
Kolejne właściwości Flexible Box Layout zostaną przedstawione w kolejnych materiałach.
Kod HTML przykładu
Zgodnie z zapowiedzią zastosowany w przykładzie kod HTML to niezmodyfikowane rozwiązanie z materiału „Układ normalny elementów HTML”. Dla przypomnienia zaprezentowano jedynie schematyczny zapis kodu, jego pełną postać można zobaczyć w źródle przykładu.
Schematyczny zapis kodu HTML przykładu:
body > div.container >
( div.header
+ div.section > (
div.main
+ div.aside
)
+ div.footer
)
Przykład
Z powodów technicznych prezentowana strona została umieszczona w ramce iframe. Możesz ją otworzyć w pełnym oknie. Chwytając za prawy dolny róg ramki, można przetestować zachowanie przykładowej strony na węższych ekranach. W poniższej demonstracji podczas zmniejszania układ strony dość szybko staje się niezbyt optymalny, jednak już szerokość startowa wynosiła poniżej 800 pikseli, a dzięki dostępnym mechanizmom kaskadowych arkuszy stylów (media queries) w bardzo prosty sposób można po przekroczeniu zdefiniowanego punktu krytycznego przejść z układu flex na układ normalny, który jest raczej jedynym rozsądnym wyjściem przy bardzo wąskich ekranach. Więcej informacji o media queries znajdziesz w kolejnych materiałach.
Kod CSS
Kod CSS bardzo niewiele różni się od zastosowanego w poprzednim materiale. Najważniejsze dla układu strony deklaracje znajdują się na jego końcu, dodatkowo oznaczono je komentarzami. Element div.section otrzymał własność display o wartości flex. Bez żadnych kolejnych zmian wszystkie jego bezpośrednie podrzędne elementy zostają wyrównane do siebie w wierszu od lewej do prawej strony, a ich szerokość jest ustawiona proporcjonalnie. Dodatkowo otrzymują taką samą wysokość. Nie ma znaczenia, ile ich jest. Aby otrzymać bardziej klasyczny układ dwukolumnowy, dwóm bezpośrednio podrzędnym elementom nadano szerokość, odpowiednio 55 i 25 procent. Zastosowano jednostkę względną, aby zachować ich elastyczność. Sumaryczna zadeklarowana szerokość obu elementów to 80 procent, jednak otrzymały one dopełnienie (padding) i w efekcie zajmują całą dostępną przestrzeń. Przeglądarki domyślnie tak wyliczają obszar zajmowany przez elementy.
Ewentualna zmiana polegająca na zastosowaniu normalnego przepływu elementów wymaga zmiany własności display z flex na block dla elementu div.section oraz usunięciu deklaracji szerokości jego podrzędnych elementów.
body, body div {
margin: 0;
padding: 0;
}
body {
padding: 30px;
background-color: #e4d7c1;
}
div.container {
max-width: 960px;
margin: 0 auto;
}
div.header {
background-color: #a00;
color: #fff;
text-align: center;
padding: 2% 0;
}
div.section {
background-color: #f2f2f2;
}
div.aside {
background-color: #fff;
}
div.footer {
background-color: #343434;
color: #fff;
text-align: center;
padding: .5% 3%;
}
/* KLUCZOWE REGUŁY */
div.section {
display: flex;
}
div.main, div.aside {
padding: 3% 5%;
width: 55%;
}
div.aside {
width: 25%;
}
/* END KLUCZOWE REGUŁY */
