Elementy CSS Flex
Elementy podrzędne (przedmioty)
Bezpośrednie elementy podrzędne kontenera Flex automatycznie stają się elementami elastycznymi (flex).
1
2
3
4
Powyższy element reprezentuje cztery niebieskie elementy elastyczne wewnątrz szarego kontenera elastycznego.
Przykład
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Właściwości elementów elastycznych to:
Zamówienie Nieruchomość
Właściwość orderokreśla kolejność elementów flex.
1
2
3
4
Pierwszy element flex w kodzie nie musi pojawiać się jako pierwszy element w układzie.
Wartość zamówienia musi być liczbą, wartość domyślna to 0.
Przykład
Właściwość order może zmienić 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>
Nieruchomość flex-grow
Właściwość flex-growokreśla, jak bardzo element flex będzie rósł w stosunku do pozostałych elementów flex.
1
2
3
Wartość musi być liczbą, wartość domyślna to 0.
Przykład
Spraw, aby trzeci element elastyczny rósł osiem razy szybciej niż inne elementy elastyczne:
<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>
Właściwość flex-shrink
Właściwość flex-shrinkokreśla, jak bardzo element flex zmniejszy się w stosunku do pozostałych elementów flex.
1
2
3
4
5
6
7
8
9
10
Wartość musi być liczbą, wartość domyślna to 1.
Przykład
Nie pozwól, aby trzeci element elastyczny skurczył się tak bardzo, 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>
Właściwość flex-bass
Właściwość flex-basisokreśla początkową długość elementu elastycznego.
1
2
3
4
Przykład
Ustaw 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>
Właściwość flex
Właściwość flexjest skróconą własnością dla właściwości
flex-grow, flex-shrinki flex-basis.
Przykład
Spraw, aby trzeci element elastyczny nie był powiększalny (0), nie kurczył się (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>
Własność wyrównania
Właściwość align-selfokreśla wyrównanie wybranego elementu wewnątrz elastycznego kontenera.
Właściwość align-self zastępuje domyślne wyrównanie ustawione przez właściwość kontenera align-items.
1
2
3
4
W tych przykładach używamy kontenera o wysokości 200 pikseli, aby lepiej zademonstrować
align-selfwłaściwość:
Przykład
Wyrównaj trzeci element elastyczny w środku kontenera:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Przykład
Wyrównaj drugi element elastyczny u góry kontenera, a trzeci element elastyczny u 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>
Właściwości elementów CSS Flexbox
Poniższa tabela zawiera wszystkie właściwości elementów CSS Flexbox:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |