В този учебник ще разгледаме модификатора на СSS свойството flex-shrink. Тази опция е част от модела на Flexbox, който ви позволява да създавате гъвкави макети, които се приспособяват към различни екрани. След като в последното видео разгледахме flex-grow, който контролира как елементите в Flex контейнера могат да растат, този път става въпрос за стесняването на елементите, когато мястото в контейнера е по-малко от предварително определената flex-basis. В тази публикация ще научите как да ограничите или приспособите съкращаването на Flexbox елементите чрез flex-shrink.
Най-важните заключения
- flex-shrink определя колко елемент може да се смали, когато няма достатъчно място.
- Стандартната стойност за flex-shrink е 1, което означава, че елемент може да заеме място, в зависимост от налично място и другите елементи в контейнера.
- flex-shrink може да се използва, за да се дефинира определено съотношение за смачкването между множество елементи.
Стъпково ръководство
По-долу ще ти обясня стъпките, за да използваш flex-shrink оптимално. Ще описа всеки стъпка с променливи снимки, които по-късно можеш да заместиш със снимките от видеото.
Първо ще видиш основно приложение на Flexbox в CSS. Имаш три елемента с flex-basis от 100 пиксела. Ако има достатъчно място във Flex контейнера, всичко ще остане както е планирано.
След това ще намалим височината на контейнера до 200 пиксела. В този случай мястото, което се изисква, е по-голямо от височината на контейнера. Елементите все още имат flex-basis от 100 пиксела и следователно не могат да се смалят, защото сме задали flex-shrink на 0.
За да активираш механизма за смачкване, промени стойността на flex-shrink. Задай я на 1 за елемента nav. Така информираш CSS, че елементът nav трябва максимално да се смали.
Сега запази промените и ще видиш, че елементът nav се смалява пропорционално, докато достигне минималната височина, зададена от съдържанието.
Ако искаш всички елементи да се смачкат равномерно, задай flex-shrink на всички елементи на 1. Когато контейнерът стане по-малък от необходимата площ, всички елементи се смачкват съответно.
За да покажеш как различните стойности на flex-shrink влияят върху макета, избери съотношение като 1:1:2. В този случай основният регион (main) получава най-голямото сведене, докато другите елементи получават по-малки.
Това означава, че основният елемент ще заеме повече пространство или ще се нуждае от по-малко пространство от останалите два елемента при липса на място. Въпреки това, ако желаеш опростена настройка на макета, можеш да зададеш flex-shrink на всички елементи с еднаква стойност.
Накрая, можеш да комбинираш стойностите за flex-grow, flex-shrink и flex-basis, което ти дава по-голяма гъвкавост при оформянето на макета в CSS. Винаги се уверявай, че ги приспособяваш към изискванията на дизайна.
Резюме
В този урок научихте как да използвате flex-shrink в CSS, за да управлявате промяната в размера на елементите във Flexbox. Научихте различни начини за дефиниране на смачкването и как то влияе върху макета.
Често задавани въпроси
Как работи flex-shrink?flex-shrink определя колко елемент може да се смали, когато наличното място е по-малко от flex-базата.
Каква е стандартната стойност на flex-shrink?Стандартната стойност на flex-shrink е 1, което означава, че всички елементи се смаляват равномерно.
Как да задам flex-shrink за няколко елемента?Като посочиш същата стойност на flex-shrink за всички елементи, смащането се разпределя равномерно.
Мога ли да използвам flex-shrink в комбинация с flex-grow?Да, flex-shrink, flex-grow и flex-basis могат да се използват заедно, за да се постигне гъвкав макет.
Какво се случва, когато flex-shrink е настроен на 0?Когато flex-shrink е настроен на 0, съответните елементи не се смаляват, дори когато контейнерът е по-малък от сумата на flex-базите им.
