Главная страница » CSS » 31. Гибкий размер элементов

31. Гибкий размер элементов

Гибкий размер элементов в CSS задается с помощью свойств flex-grow, flex-shrink, и flex-basis. Эти свойства позволяют управлять распределением пространства между flex-элементами внутри контейнера, делая макет более адаптивным и динамичным. Все эти свойства могут быть заданы с помощью сокращенного свойства flex.

Свойство `flex-grow`

Свойство flex-grow определяет, как flex-элементы будут расти относительно друг друга при наличии свободного пространства в контейнере.

Синтаксис:

				
					element {
    flex-grow: number;
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #add8e6;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
        }
        .item1 {
            flex-grow: 1;
        }
        .item2 {
            flex-grow: 2;
        }
        .item3 {
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Элемент 1</div>
        <div class="item item2">Элемент 2</div>
        <div class="item item3">Элемент 3</div>
    </div>
</body>
</html>

В данном примере элемент с классом item1 будет занимать одну часть свободного пространства, item2 — две части, а item3 — три части.

Свойство `flex-shrink`

Свойство flex-shrink определяет, как flex-элементы будут сжиматься относительно друг друга при недостатке пространства в контейнере.

Синтаксис:

				
					element {
    flex-shrink: number;
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            width: 400px;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #90ee90;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
            width: 200px;
        }
        .item1 {
            flex-shrink: 1;
        }
        .item2 {
            flex-shrink: 2;
        }
        .item3 {
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Элемент 1</div>
        <div class="item item2">Элемент 2</div>
        <div class="item item3">Элемент 3</div>
    </div>
</body>
</html>

В данном примере элемент с классом item1 будет сжиматься меньше всего, item2 — больше, а item3 — ещё больше.

Свойство `flex-basis`

Свойство flex-basis задаёт начальный размер flex-элемента перед распределением свободного пространства в контейнере.

Синтаксис:

				
					element {
    flex-basis: length | auto;
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #ffa07a;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
        }
        .item1 {
            flex-basis: 100px;
        }
        .item2 {
            flex-basis: 200px;
        }
        .item3 {
            flex-basis: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Элемент 1</div>
        <div class="item item2">Элемент 2</div>
        <div class="item item3">Элемент 3</div>
    </div>
</body>
</html>

В данном примере элемент с классом item1 будет иметь начальный размер 100px, item2 — 200px, а item3 — 300px.

Свойство `flex`

Свойство flex является сокращенной записью для комбинации свойств flex-grow, flex-shrink, и flex-basis.

Синтаксис:

				
					element {
    flex: flex-grow flex-shrink flex-basis;
}

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #add8e6;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
        }
        .item1 {
            flex: 1 1 100px;
        }
        .item2 {
            flex: 2 1 200px;
        }
        .item3 {
            flex: 3 1 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Элемент 1</div>
        <div class="item item2">Элемент 2</div>
        <div class="item item3">Элемент 3</div>
    </div>
</body>
</html>

В данном примере элемент с классом item1 будет иметь гибкость 1, сжиматься с коэффициентом 1 и иметь начальный размер 100px, item2 — гибкость 2, сжиматься с коэффициентом 1 и начальный размер 200px, item3 — гибкость 3, сжиматься с коэффициентом 1 и начальный размер 300px.

Распространённые ошибки

Неравномерное распределение гибкости: Убедитесь, что коэффициенты flex-grow и flex-shrink правильно распределены между элементами, чтобы избежать неожиданного поведения.
Пренебрежение начальным размером: flex-basis задаёт начальный размер элемента, и его значение влияет на конечный размер элемента после распределения свободного пространства.
Некорректное использование сокращенного свойства flex: При использовании flex всегда указывайте все три значения (flex-grow, flex-shrink, и flex-basis), чтобы избежать непредсказуемых результатов.

Заключение

Свойства flex-grow, flex-shrink, и flex-basis позволяют гибко управлять размером элементов внутри flex-контейнера. Понимание и правильное использование этих свойств позволяет создавать адаптивные и динамичные макеты, которые автоматически подстраиваются под размеры контейнера.

Тестовое задание

Создайте HTML-документ с контейнером, который использует flex-контейнер для выравнивания элементов.
Примените различные значения для свойств flex-grow, flex-shrink, и flex-basis.
Используйте сокращенное свойство flex для задания гибкости элементов.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #add8e6;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
        }
        .item1 {
            flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
        }
        .item2 {
            flex: 2 1 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */
        }
        .item3 {
            flex: 3 1 300px; /* flex-grow: 3, flex-shrink: 1, flex-basis: 300px */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Элемент 1</div>
        <div class="item item2">Элемент 2</div>
        <div class="item item3">Элемент 3</div>
    </div>
</body>
</html>

Выполнив это задание, вы сможете лучше понять и применить свойства гибкого размера для управления размерами элементов в контейнере, создавая адаптивные и динамичные макеты веб-страниц.