74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
---
|
||
title: Flex-grow
|
||
localeTitle: Flex-расти
|
||
---
|
||
# Flex-Grow
|
||
|
||
Свойство flex-grow - свойство flexbox, которое позволяет указать распределение свободного пространства для контейнеров в гибком контейнере. Он обеспечивает решение всего этого нежелательного пространства!
|
||
|
||
Он превратит ваш контейнер из этого
|
||
|
||
|
||
|
||
# **к этому**
|
||
|
||
|
||
|
||
Что сейчас произошло?
|
||
|
||
Ну, мы добавили две вещи в синтаксис css.
|
||
|
||
HTML
|
||
|
||
```html
|
||
|
||
<p class = "ten">1</p>
|
||
<p class = "twenty">2</p>
|
||
```
|
||
|
||
CSS
|
||
|
||
```css
|
||
body {
|
||
display:flex;
|
||
}
|
||
|
||
p {
|
||
flex-grow: 1;
|
||
}
|
||
```
|
||
|
||
Две вещи произошли
|
||
|
||
1. Родительский контейнер был преобразован в гибкий дисплей посредством `display:flex`
|
||
2. Оставшееся «свободное пространство» затем распределялось среди оставшихся p-контейнеров в равном рационе, поскольку каждый из них обладает свойством flex-grow 1.
|
||
|
||
Что произойдет, если у нас есть p-контейнеры с различными свойствами гибкого роста?
|
||
|
||
Давайте посмотрим пример.
|
||
|
||
Сначала давайте создадим два абзаца и включим отображение: flex;
|
||
|
||
|
||
|
||
Обратите внимание на несколько вещей
|
||
|
||
* Цветовая схема приятная
|
||
* Справа от двух ящиков есть пустое пространство.
|
||
|
||
Это пустое пространство - это «свободное пространство», которое будет выделено каждому из разных абзацев позже в зависимости от их свойств гибкого роста.
|
||
|
||
Чтобы увидеть это в действии, давайте первый класс класса «десять» и свойство flex-grow 1. Давайте также дадим второй класс «двадцать» и свойство flex-grow 2.
|
||
|
||
|
||
|
||
Обратите внимание на несколько вещей
|
||
|
||
1. Второй размер не вдвое больше, чем у первого, несмотря на наличие свойства flex-grow, которое вдвое больше, чем у первого.
|
||
2. Все пространство заполнено. (Некоторые поля были добавлены в сторону, чтобы можно было увидеть их более четко).
|
||
|
||
По мере изменения размера экрана мы также обнаруживаем, что первая сжимается в два раза быстрее второй.
|
||
|
||
|
||
|
||
#### Дополнительная информация: |