CSS Flex Container
Element nadrzędny (kontener)
Tak jak opisaliśmy w poprzednim rozdziale, jest to kontener flex (niebieski obszar) z trzema elementami flex :
1
2
3
Elastyczny kontener staje się elastyczny, ustawiając displaywłaściwość na
flex:
Przykład
.flex-container {
display: flex;
}
Właściwości kontenera elastycznego to:
Właściwość kierunku flex
Właściwość flex-directionokreśla, w którym kierunku kontener chce ułożyć elementy elastyczne.
1
2
3
Przykład
Wartość columnukłada elementy elastyczne w pionie (od góry do dołu):
.flex-container {
display: flex;
flex-direction: column;
}
Przykład
Wartość column-reverseukłada elementy elastyczne pionowo (ale od dołu do góry):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Przykład
Wartość rowukłada elementy elastyczne w poziomie (od lewej do prawej):
.flex-container {
display: flex;
flex-direction: row;
}
Przykład
Wartość row-reverseukłada elementy elastyczne w poziomie (ale od prawej do lewej):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Właściwość flex-wrap
Właściwość flex-wrapokreśla, czy elementy flex powinny być zawijane, czy nie.
Poniższe przykłady zawierają 12 elementów elastycznych, aby lepiej zademonstrować
flex-wrapwłaściwość.
1
2
3
4
5
6
7
8
9
10
11
12
Przykład
Wartość wrapokreśla, że w razie potrzeby elementy elastyczne zostaną zawinięte:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Przykład
Wartość nowrapokreśla, że elementy flex nie będą zawijane (jest to ustawienie domyślne):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Przykład
Wartość wrap-reverseokreśla, że elastyczne elementy zostaną zawinięte w razie potrzeby w odwrotnej kolejności:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Właściwość flex-flow
Właściwość flex-flowjest skróconą właściwością służącą do ustawiania właściwości
flex-directioni
flex-wrap.
Przykład
.flex-container {
display: flex;
flex-flow: row wrap;
}
Właściwość uzasadnienia treści
Właściwość justify-contentsłuży do wyrównania elementów flex:
1
2
3
Przykład
Wartość centerwyrównuje elementy elastyczne w środku kontenera:
.flex-container {
display: flex;
justify-content: center;
}
Przykład
Wartość flex-startwyrównuje elementy elastyczne na początku kontenera (jest to ustawienie domyślne):
.flex-container {
display: flex;
justify-content: flex-start;
}
Przykład
Wartość flex-endwyrównuje elementy elastyczne na końcu kontenera:
.flex-container {
display: flex;
justify-content: flex-end;
}
Przykład
Wartość space-aroundwyświetla elementy elastyczne z odstępem przed, między i za wierszami:
.flex-container {
display: flex;
justify-content: space-around;
}
Przykład
Wartość space-betweenwyświetla elementy elastyczne z odstępem między wierszami:
.flex-container {
display: flex;
justify-content: space-between;
}
Właściwość wyrównania elementów
Właściwość align-itemssłuży do wyrównania elementów flex.
1
2
3
W tych przykładach używamy kontenera o wysokości 200 pikseli, aby lepiej zademonstrować
align-itemswłaściwość.
Przykład
Wartość centerwyrównuje elementy elastyczne w środku kontenera:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Przykład
Wartość flex-startwyrównuje elementy elastyczne u góry kontenera:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Przykład
Wartość flex-endwyrównuje elementy elastyczne na dole kontenera:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Przykład
Wartość stretchrozciąga elementy elastyczne, aby wypełnić kontener (jest to ustawienie domyślne):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Przykład
Wartość baselinewyrównuje elementy elastyczne, takie jak ich linie bazowe:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Uwaga: w przykładzie zastosowano inny rozmiar czcionki, aby zademonstrować, że elementy są wyrównane do linii bazowej tekstu:
1
2
3
Właściwość wyrównania treści
Właściwość align-contentsłuży do wyrównania linii elastycznych.
1
2
3
4
5
6
7
8
9
10
11
12
W tych przykładach używamy kontenera o wysokości 600 pikseli z
flex-wrapwłaściwością ustawioną na wrap, aby lepiej zademonstrować tę align-contentwłaściwość.
Przykład
Wartość space-betweenwyświetla elastyczne linie z równymi odstępami między nimi:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Przykład
Wartość space-aroundwyświetla elastyczne linie z odstępem przed, pomiędzy i za nimi:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Przykład
Wartość stretchrozciąga elastyczne linie, aby zająć pozostałą przestrzeń (jest to ustawienie domyślne):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Przykład
Wyświetlane centerwartości wyświetlają elastyczne linie w środku kontenera:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Przykład
Wartość flex-startwyświetla elastyczne linie na początku kontenera:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Przykład
Wartość flex-endwyświetla elastyczne linie na końcu kontenera:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Idealne centrowanie
W poniższym przykładzie rozwiążemy bardzo powszechny problem stylistyczny: idealne centrowanie.
ROZWIĄZANIE: Ustaw obie właściwości
justify-contenti na , a element flex będzie idealnie wyśrodkowany:align-itemscenter
Przykład
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Właściwości kontenera CSS Flexbox
Poniższa tabela zawiera wszystkie właściwości kontenera CSS Flexbox:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |