CSS Flexbox

1
2
3
4
5
6
7
8

Spróbuj sam

Moduł układu CSS Flexbox

Przed wprowadzeniem modułu układu Flexbox, dostępne były następujące cztery rodzaje modeli układu:

  • Blokowy (Block), używany do części (sekcji) strony
  • Wewnętrzny (Inline), używany do tekstu
  • Tabela, używana do dwuwymiarowych danych tabelowych
  • Pozycjonowanie, używane do określonej lokalizacji elementu

Moduł układu Flexbox, który pozwala na łatwiejsze projektowanie elastycznych struktur układu responsywnego, bez konieczności używania float lub pozycjonowania.

Wspieranie przeglądarki

Wszystkie współczesne przeglądarki wspierają flexbox Atrybuty.

29.0 11.0 22.0 10 48

Elementy Flexbox

Aby zacząć używać modelu Flexbox, musisz najpierw zdefiniować kontener Flex.

1
2
3

Powyższe elementy reprezentują kontener flex z trzema elementami flex (niebieska strefa).

Przykład

kontener flex zawierający trzy elementy flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Spróbuj sam

rodzica (kontenera)

przez użycie: display Właściwość ustawiona na: flexkontener flex będzie rozciągliwy:

1
2
3

Przykład

.flex-container {
  display: flex;
}

Spróbuj sam

Poniżej znajdują się właściwości kontenera flex:

Właściwość flex-direction

flex-direction Właściwość definiuje, w哪个 kierunku ma być układany elementy flex kontenera.

1
2
3

Przykład

column Wartość ustawia układ elementów flex pionowo (od góry do dołu):

.flex-container {
  display: flex;
  flex-direction: column;
}

Spróbuj sam

Przykład

column-reverse Wartość układa elementy flex pionowo (od dołu do góry):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Spróbuj sam

Przykład

row Wartość układa elementy flex poziomo (od lewej do prawej):

.flex-container {
  display: flex;
  flex-direction: row;
}

Spróbuj sam

Przykład

row-reverse Wartość układa elementy flex poziomo (od prawej do lewej):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Spróbuj sam

Właściwość flex-wrap

flex-wrap Właściwość określa, czy elementy flex powinny być przewijane.

Poniższy przykład zawiera 12 elementów flex, aby lepiej pokazać właściwość flex-wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Przykład

wrap Wartość określa, że elementy flex będą przewijane w razie potrzeby:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Spróbuj sam

Przykład

nowrap Wartość określa, że elementy flex nie będą przewijane (domyślnie):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Spróbuj sam

Przykład

wrap-reverse Wartość określa, że w razie potrzeby elementy elastyczne będą przewijane w przeciwnym kierunku:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Spróbuj sam

Właściwość flex-flow

flex-flow Właściwość jest skróconą właściwością do jednoczesnego ustawiania właściwości flex-direction i flex-wrap.

Przykład

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Spróbuj sam

Właściwość justify-content

justify-content Właściwość służy do wyrównania elementów flex:

1
2
3

Przykład

center Wartość wyścigania elementów flex w środku kontenera:

.flex-container {
  display: flex;
  justify-content: center;
}

Spróbuj sam

Przykład

flex-start Wartość wyścigania elementów flex na początku kontenera (domyślnie):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Spróbuj sam

Przykład

flex-end Wartość wyścigania elementów flex na końcu kontenera:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Spróbuj sam

Przykład

space-around Wartość pokazuje elementy flex z przestrzenią przed, między i po wierszami:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Spróbuj sam

Przykład

space-between Wartość pokazuje elementy flex między wierszami z przestrzenią:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Spróbuj sam

Właściwość align-items

align-items Właściwość służy do wertykalnego wyścigania elementów flex.

1
2
3

W tych przykładach używamy kontenera o wysokości 200 pikseli, aby lepiej pokazać właściwość align-items.

Przykład

center Wartość wyrównuje projekty flex w środku kontenera:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Spróbuj sam

Przykład

flex-start Wartość wyrównuje projekty flex na górze kontenera:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Spróbuj sam

Przykład

flex-end Wartość wyrównuje projekty elastyczne na dole kontenera:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Spróbuj sam

Przykład

stretch Wartość rozciąga projekty flex, aby wypełnić kontener (domyślnie):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Spróbuj sam

Przykład

baseline Wartość sprawia, że projekty flex są wyrównane do bazy tekstu:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Spróbuj sam

Uwaga:W tym przykładzie używamy różnych font-size, aby pokazać, że projekty są wyważone w stosunku do tekstu.

1
2
3
4

Właściwość align-content

align-content Atrybut używany do wyważania linii elastycznych.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

W tych przykładach używamy kontenerów o wysokości 600 pikseli i ustawiamy atrybut flex-wrap na wrap, aby lepiej pokazać atrybut align-content.

Przykład

space-between Wartość wyświetla linie elastyczne z równymi odstępami między nimi:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Spróbuj sam

Przykład

space-around Wartość wyświetla linie elastyczne z przestrzenią przed, między i po:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Spróbuj sam

Przykład

stretch Wartość rozciąga linie elastyczne, aby zająć pozostałą przestrzeń (domyślnie):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Spróbuj sam

Przykład

center Wartość wyświetla linie elastyczne w środku kontenera:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Spróbuj sam

Przykład

flex-start Wartość wyświetla linie elastyczne na początku kontenera:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Spróbuj sam

Przykład

flex-end Wartość wyświetla linie elastyczne na końcu kontenera:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Spróbuj sam

Idealne wyśrodkowanie

W poniższym przykładzie rozwiążemy bardzo powszechny problem stylizacji: idealne wyśrodkowanie.

Rozwiązanie: umieść justify-content i align-items Atrybuty ustawione na środek, a projekty flex będą idealnie wyśrodkowane:

Przykład

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Spróbuj sam

Podelementy (projekty)

Bezpośrednie podelementy kontenera flex automatycznie stają się elementami elastycznymi (flex).

1
2
3
4

Powyższe elementy reprezentują cztery niebieskie elementy flex w szarym kontenerze flex.

Przykład

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Spróbuj sam

Dostępne atrybuty dla elementów elastycznych to:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Atrybut order

order Atrybut określa kolejność elementów flex.

1
2
3
4

Pierwszy element flex w kodzie nie musi być wyświetlany jako pierwsze element w układzie.

order Wartość musi być liczbą, wartość domyślna to 0.

Przykład

order Atrybut może zmieniać kolejność elementów flex.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Spróbuj sam

Atrybut flex-grow

flex-grow Atrybut określa, o ile dany element flex rośnie więcej niż inne elementy flex.

1
2
3

Wartość musi być liczbą, wartość domyślna to 0.

Przykład

Ustawia szybkość wzrostu trzeciego elementu elastycznego o osiem razy szybciej niż innych elementów elastycznych:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Spróbuj sam

Atrybut flex-shrink

flex-shrink Atrybut określa, o ile dany element flex kurczy się więcej niż inne elementy flex.

1
2
3
4
5
6
7
8
9

Wartość musi być liczbą, wartość domyślna to 0.

Przykład

Nie pozwól, aby trzeci element elastyczny kurczył się tak samo jak inne elementy elastyczne:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Spróbuj sam

Atrybut flex-basis

flex-basis Atrybut określa początkową długość elementu flex.

1
2
3
4

Przykład

Ustawia początkową długość trzeciego elementu elastycznego na 200 pikseli:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Spróbuj sam

Atrybut flex

flex Atrybut jest skróconą wersją atrybutów flex-grow, flex-shrink i flex-basis.

Przykład

Ustawia trzeci element elastyczny, aby nie mógł się rozszerzać (0), nie mógł się kurczyć (0) i miał początkową długość 200 pikseli:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Spróbuj sam

Atrybut align-self

align-self Atrybut określa sposób wyrównania wybranych elementów w kontenerze elastycznym.

align-self Atrybuty będą nadpisywać domyślne metody wyrównywania ustawione przez atrybut align-items kontenera.

1
2
3
4

W tych przykładach używamy kontenera o wysokości 200 pikseli, aby lepiej pokazać atrybut align-self:

Przykład

Wyrównaj trzeci elastyczny element do środka kontenera:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Spróbuj sam

Przykład

Wyrównaj drugi elastyczny element do góry kontenera, a trzeci elastyczny element do dołu kontenera:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Spróbuj sam

Responsywna biblioteka obrazów z użyciem Flexbox

Użyj Flexbox do tworzenia responsywnej biblioteki obrazów, która zmienia się między czterema, dwoma lub pełnoekranowymi obrazami w zależności od rozmiaru ekranu:

Spróbuj sam

Responsywne strony internetowe z użyciem Flexbox

Użyj flexbox do tworzenia responsywnych stron internetowych, które zawierają elastyczne nawigacje i zawartość:

Spróbuj sam

Atrybuty CSS Flexbox

Poniższa tabela zawiera atrybuty CSS używane z flexbox:

Atrybut Opis
display Określa typ kontenera dla elementów HTML.
flex-direction Określa kierunek elastycznych elementów w kontenerze.
justify-content Poziomo wyrównuje te elementy, gdy elastyczne elementy nie używają wszystkich dostępnych przestrzeni głównego osi.
align-items Wertykalnie wyrównuje te elementy, gdy elastyczne elementy nie używają wszystkich dostępnych przestrzeni głównego osi.
flex-wrap Określa, czy elastyczne elementy powinny być przebijane, jeśli na jednej linii flex nie ma wystarczająco dużo miejsca na ich umieszczenie.
align-content Modyfikuje zachowanie atrybutu flex-wrap. Podobnie jak align-items, ale zamiast wyrównywania elastycznych elementów, wyrównuje linie flex.
flex-flow Skrócone atrybuty dla atrybutów flex-direction oraz flex-wrap.
order Określa kolejność elastycznych elementów względem innych elastycznych elementów w tym samym kontenerze.
align-self Używane do elastycznych elementów. Zastępuje atrybut align-items kontenera.
flex Skrócone atrybuty dla atrybutów flex-grow, flex-shrink oraz flex-basis.