W tym poradniku zajmiemy się właściwością modyfikatora flex-shrink w CSS. Ta opcja jest częścią modelu Flexbox, który pozwala tworzyć elastyczne układy, które dostosowują się do różnych rozmiarów ekranu. Podczas gdy w poprzednim filmie omówiliśmy flex-grow, który reguluje, jak elementy w Kontenerze Flexa mogą rosnąć, tym razem skupiamy się na zwężaniu elementów, gdy miejsca w kontenerze jest mniej niż podana wartość flex-basis. W tym wpisie dowiesz się, jak za pomocą flex-shrink możesz precyzyjnie ograniczać lub dostosowywać zwężanie elementów Flexboxa.
Najważniejsze wnioski
- flex-shrink określa, o ile element może się zebrać, gdy miejsca brakuje.
- Domyślną wartością dla flex-shrink jest 1, co oznacza, że element może zająć miejsce w zależności od dostępnej przestrzeni oraz innych zdefiniowanych elementów w kontenerze.
- Można użyć flex-shrink, aby określić określony stosunek zwężenia między kilkoma elementami.
Instrukcja krok po kroku
Poniżej wyjaśnię Ci kroki, jak skutecznie wykorzystać flex-shrink. Każdy krok zilustruję zmiennymi zrzutów ekranu, które później możesz zastąpić odpowiednimi zrzutami ekranu z filmu.
Najpierw zobaczysz podstawowe zastosowanie układu Flexbox w CSS. Masz trzy elementy o flex-basis 100 pikseli. Jeśli w kontenerze Flexa jest wystarczająco dużo miejsca, wszystko pozostaje zgodnie z planem.
Następnie zmniejszymy wysokość kontenera do 200 pikseli. W tym przypadku wymagana przestrzeń jest większa niż wysokość kontenera. Elementy wciąż mają flex-basis 100 pikseli i dlatego nie mogą się zmniejszać, ponieważ ustawiliśmy flex-shrink na 0.
Aby aktywować mechanizm zmniejszania, zmień wartość flex-shrink. Ustaw go na 1 dla elementu nawigacyjnego, informując CSS, że element nawigacyjny powinien maksymalnie się zmniejszyć.
Zapisz teraz swoje zmiany, a zobaczysz, że element nawigacyjny zostanie proporcjonalnie zmniejszony do minimalnej wysokości określonej przez treść.
Jeśli chcesz, aby wszystkie elementy równomiernie się zmniejszały, ustaw flex-shrink na 1 dla wszystkich elementów. Jeśli teraz kontener stanie się mniejszy niż wymagana przestrzeń, wszystkie elementy odpowiednio się zmniejszą.
Podsumowując efekty różnych wartości flex-shrink na układ, wybierz proporcje 1:1:2. W tym przypadku główny obszar (main) otrzymuje największą część zmniejszenia, podczas gdy pozostałe elementy otrzymują mniejsze części.
Oznacza to, że element main będzie zajmować więcej miejsca lub mniej miejsca niż dwa inne elementy w razie braku miejsca. Jeśli jednak chcesz uzyskać równomierną dostosowującą się do siebie odpowiedź, możesz ustawić flex-shrink dla wszystkich elementów na tę samą wartość.
Ostatecznie można połączyć wartości flex-grow, flex-shrink i flex-basis, dając większą elastyczność w projektowaniu układów w CSS. Pamiętaj, aby dostosować je zawsze do wymagań Twojego projektu.
Podsumowanie
W tym samouczku nauczyłeś(aś) się, jak korzystać z flex-shrink w CSS, aby kontrolować zmiany rozmiarów elementów Flexbox. Poznałeś różne sposoby definiowania zwężania i jego wpływ na układ.
Najczęstsze pytania
Jak działa flex-shrink?flex-shrink określa, o ile element może się zebrać, gdy dostępna przestrzeń jest mniejsza niż flex-basis.
Jaka jest domyślna wartość flex-shrink?Domyślną wartością flex-shrink jest 1, co oznacza równomierne zwężenie elementów.
Jak ustawić flex-shrink dla wielu elementów?Ustawiając tę samą wartość flex-shrink dla wszystkich elementów, zwężenie jest równomiernie rozprowadzone.
Czy mogę użyć flex-shrink w połączeniu z flex-grow?Tak, flex-shrink, flex-grow i flex-basis mogą być używane razem, aby uzyskać elastyczny układ.
Co się dzieje, gdy flex-shrink jest ustawiony na 0?Jeśli flex-shrink wynosi 0, elementy nie będą się kurczyć, nawet jeśli kontener jest mniejszy niż suma flex-basisy.
