Flex Shrink: Как уменьшать размеры элементов на веб-странице
Flex shrink (гибкое сжатие) - это свойство, которое определяет, насколько элемент гибко может сжиматься внутри контейнера, когда доступное для размещения пространство уменьшается.
Механизм работы гибкого сжатия основан на том, что каждый элемент внутри контейнера имеет свойство flex-shrink, которое определяет, насколько сильно элемент должен сжиматься в случае нехватки места.
Синтаксис CSS для определения свойства flex-shrink:
css
flex-shrink: ;
где
Пример кода, демонстрирующий работу свойства flex-shrink:
html
css
.container {
display: flex;
width: 100px;
height: 100px;
}
.box {
width: 30px;
height: 30px;
background-color: red;
}
.box1 {
flex-shrink: 2;
}
.box2 {
flex-shrink: 1;
}
В этом примере есть три элемента с классами box, которые содержатся в контейнере с классом container. У первого элемента flex-shrink равен 2, у второго элемента - 1, а у третьего - значение по умолчанию (1).
Если доступное пространство для размещения контейнера уменьшается, то элементы контейнера начинают сжиматься. Как мы видим в этом примере, первый элемент начинает сжиматься быстрее, чем второй, так как значение flex-shrink у него больше. Третий элемент будет сжиматься на стандартную величину, так как значение flex-shrink не определено явно.
Таким образом, свойство flex-shrink позволяет настраивать гибкое сжатие элементов контейнера в зависимости от их значимости и значимости других элементов.