gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
f5b94b51f1b7a926554be73b42ab8b5db822ce77
freeCodeCamp/guide/russian/css/layout/flexbox/flex-grow/index.md
Ahmad Abdolsaheb 21bd031a52 fix: repalce imgur with s3 for russian guide without conflict (#36055) 
* fix: imgur to s3 for russian guide without conflict

(cherry picked from commit ac90750e36b0dd1fe508c69a2277b75be48e4b95)

* fix: remove extra links

Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* fix: revert unrelated changes

* fix: revert changes
2019-05-25 02:23:55 +05:30

3.3 KiB
Raw Blame History

title, localeTitle
title localeTitle
Flex-grow Flex-расти

Flex-Grow

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

Он превратит ваш контейнер из этого

к этому

Что сейчас произошло?

Ну, мы добавили две вещи в синтаксис css.

HTML


<p class = "ten">1</p> 
 <p class = "twenty">2</p>

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. Все пространство заполнено. (Некоторые поля были добавлены в сторону, чтобы можно было увидеть их более четко).

По мере изменения размера экрана мы также обнаруживаем, что первая сжимается в два раза быстрее второй.

Дополнительная информация: