Свойство flex-shrink
Описание
Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.
Синтаксис
flex-shrink: число;Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.flex-container {
display: flex;
}
.flex1 {
flex-shrink: 3;
margin-right: 2rem;
}
.flex1 img {
width: 100%;
height: 200px;
}
.flex2 {
flex-shrink: 2;
}
</style>
<div class='flex-container'>
<div class='flex-item flex1'>
<img src='/files/images/regular/fon10.jpg' alt='' />
</div>
<div class='flex-item flex2'>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
</div>
</div>
</body>
</html>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
Читайте также
Свойство grid-auto-flow
Управляет тем, как работает алгоритм автоматического размещения, точно указывая, как элементы поп...
Применяется к дочернему элементу
Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у ...
Свойство border-color
Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Свойство border-top-left-radius
Устанавливает радиус скругления левого верхнего угла рамки.Если рамка не задана, то скругление та...
Селекторы атрибутов со значениями через пробел
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы зада...