CSS Flexbox, czyli jak uprościć stylowanie stron internetowych
Początki CSS-owego layoutu
display: block;
display: inline;
To jest tekst. Kontener, w którym się znajduje jest elementem blokowym, a tekst - elementem liniowym.
Początki CSS-owego layoutu
display: inline-block;
To jest tekst. W środku ma element liniowo blokowy, traktowany jako "wyraz".
Czemu to wystarczało?
Jak wyglądały strony w 1997?
Wkrótce...
Nagłówek
Nawigacja
Zawartość
Stopka
Wkrótce... Problemy.
Jak mnie wycentrować?
Wkrótce... Hacki
<div class="a">
<div class="c">
<div class="b">B</div>
</div>
</div>
B
.a {
display: table;
}
.c {
display: table-cell;
vertical-align: middle;
}
.b {
margin: 0 auto;
}
Inne problemy: floaty
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
width: 500px;
}
.a > * {
float: left;
}
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
width: 500px;
}
.a > * {
float: left;
}
.a::after {
content: " ";
display: block;
clear: both;
}
Inne problemy: inline-block
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
width: 500px;
}
.a > * {
display: inline-block;
}
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
width: 500px;
font-size: 0;
}
.a > * {
display: inline-block;
font-size: 38px;
}
Flexbox
display: flex;
display: inline-flex;
- Flex kontener (flex container)
- Flex element (flex item)
Flex element
Flex element
Flex element
Flex element
Flex element
Flexbox
Kontener dostosowuje się wielkością do zawartości (brak cleara)
Flex element
Flex element
Flex element
Flex element
Flex element
Flexbox
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
display: flex;
}
Flexbox: flex-wrap
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
display: flex;
flex-wrap: wrap;
}
Flexbox: flex-direction
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
Flexbox: flex-direction
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
.a {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
Flexbox: order
B
C
D
E
.a {
display: flex;
}
B
C
D
E
.a {
display: flex;
}
.c {
order: -1;
}
.d {
order: 1;
}
Możliwość manipulowania kolejnością bez zmian w HTML-u
Flexbox: justify-content
B
C
D
.a {
display: flex;
justify-content: flex-start;
}
B
C
D
.a {
display: flex;
justify-content: center;
}
B
C
D
.a {
display: flex;
justify-content: space-between;
}
B
C
D
.a {
display: flex;
justify-content: space-around;
}
Flexbox: align-content
B
C
D
E
F
G
H
.a {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
B
C
D
E
F
G
H
.a {
display: flex;
flex-wrap: wrap;
align-content: center;
}
B
C
D
E
F
G
H
.a {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
Flexbox: align-items
B
C
D
.a {
display: flex;
align-items: flex-start;
}
B
C
D
.a {
display: flex;
align-items: center;
}
B
C
D
.a {
display: flex;
align-items: stretch;
}
B
C
D
.a {
display: flex;
align-items: baseline;
}
Flexbox: align-self
B
C
D
E
.a {
display: flex;
align-items: flex-start;
}
.b {
align-self: center;
}
.e {
align-self: flex-end;
}
Flexbox: flex-grow
B
C
D
E
.a {
display: flex;
}
.d {
flex-grow: 1;
}
B
C
D
E
.a {
display: flex;
}
.c {
flex-grow: 3;
}
.d {
flex-grow: 1;
}
Flexbox: flex-shrink
BBBBB
CCCCC
DDDDD
EEEEE
FFFFF
.a {
display: flex;
}
.a > * {
min-width: 0;
}
.d {
flex-shrink: 0;
}
BBBBB
CCCCC
DDDDD
EEEEE
FFFFF
.a {
display: flex;
}
.a > * {
min-width: 0;
}
.c {
flex-shrink: 3;
}
.d {
flex-grow: 0;
}
Flexbox: przykład 1
Header
Content
Footer
.a {
display: flex;
flex-direction: column;
}
.header, .footer {
flex-shrink: 0;
}
.content {
flex-grow: 1;
}
Flexbox: przykład 2
Sidebar
Content
.a {
display: flex;
align-items: flex-start;
}
.sidebar {
width: 100px;
}
.content {
flex-grow: 1;
}
Flexbox: przykład 3
D: Krótki tekst.
E: Długi tekst. Sąsiad też się rozszerzył w pionie.
.a {
display: flex;
}
.a > * {
flex-grow: 1;
flex-basis: 0;
}
Materiały
- Tutorial: bocoup.com/weblog/dive-into-flexbox.
- Nauka na przykładach: flexboxfroggy.com.
- Co można zrobićz flexboksem (a co wcześniej było trudne): philipwalton.github.io/solved-by-flexbox.
- Opis błędów w obsłudze flexboksa w popularnych przeglądarkach: github.com/philipwalton/flexbugs.