Grow flex css: flex-grow — Web technology for developers – flex-grow | CSS | WebReference

Содержание

flex-grow | CSS | WebReference

Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяК флекс-элементам
АнимируетсяДа

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]
Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-grow</title> <style> form { width: 400px; margin: auto; } p { display: flex; } label { margin-right: 10px; } input, select { flex-grow: 1; } </style> </head> <body> <form action="handler.php"> <p> <label>Имя:</label> <input name="name"> </p> <p> <label>Какая у вас операционная система?:</label> <select name="os"> <option value="1">Windows</option> <option value="2">Linux</option> <option value="3">Mac OS</option> </select> </p> <p><button>Отправить</button></p> </form> </body> </html>

Результат данного примера показан на рис. 1.

Ширина полей формы

Ширина полей формы

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-grow.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.08.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Свойство flex-grow | CSS справочник

CSS свойства

Определение и применение

CSS свойство flex-grow указывает на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере.


Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-grow не окажет на такой элемент никакого эффекта.


Например, если в контейнере все блоки имеют значение свойства flex-grow равное 1, а один блок имеет значение 2, то это означает, что он будет в два раза больше по отношению к ним (относительное значение). Если мы при этом добавим в контейнер еще один блок, то при этом ширина контейнера не изменится, а блок, который имел значение 2 по прежнему останется в два раза больше остальных, при этом ширина всех блоков пропорционально уменьшится.

Поддержка браузерами

CSS синтаксис:

flex-grow:"number | initial | inherit";

JavaScript синтаксис:

object.style.flexGrow = "3"

Значения свойства

ЗначениеОписание
numberЧисло, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам в контейнере. Отрицательные значения не допускаются.
Значение по умолчанию 0.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Увеличение флекс элементов в CSS</title>
<style> 
.container {
height: 100px;  /* устанавливаем высоту блока */
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
color: white;  /* устанавливаем цвет шрифта */
} 
.container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере)
-webkit-flex-grow: 1;  /* для поддержки ранних версий браузеров */
flex-grow: 1;  /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */
background: orange;  /* устанавливаем цвет заднего фона */
} 
.container div:nth-of-type(2)
{ псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) -webkit-flex-grow: 3; /* для поддержки ранних версий браузеров */ flex-grow: 3; /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */ background: brown; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) -webkit-flex-grow: 1; /* для поддержки ранних версий браузеров */ flex-grow: 1; /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */ background: tan; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <div class = "container"> <div>1</div> <div>3</div> <div>1</div> </div> </body> </html>

Результат примера:

Пример использования CSS свойства flex-grow.CSS свойства

flex-grow | CSS справочник

Поддержка браузерами

11.0+ 28.0+ 29.0+ 17.0+ 9.0+

Описание

CSS свойство flex-grow указывает сколько свободного пространства может занять flex-элемент относительно других элементов внутри flex-контейнера.

Значение по умолчанию: 0
Применяется: к flex-элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.flexGrow="2";

Синтаксис

flex-grow: число;

Значения свойства

Значение Описание
число Значение по умолчанию 0, указывает что элемент имеет заданные размеры или размеры относительно его содержимого.

Все положительные значения указывают, как будет распределяться свободное пространство между всеми flex-элементами. Например, есть 5 элементов с шириной в 100px каждый, они лежат в контейнере с шириной в 1000px. Если каждому из них задать flex-grow: 1, то свободное пространство в 500px будет поделено на 5 и поровну разделено между всеми элементами (по 100px на каждый).

Если одному из 5 элементов задать flex-grow: 6, то 500px будет разделено на 10 частей (так как в сумме значения свойства flex-grow дали 10) и элементам со значением 1 достанется по 50px (500 : 10 · 1 = 50) свободно пространства, а элементу со значением 6 - 300px (500 : 10 · 6 = 300).

Если только одному из flex-элементов было задано свойство flex-grow с любым положительным значение, то этот элемент займёт всё свободное пространство.

Пример

Всем flex-контейнерам, кроме синего задано flex-grow: 1;, они не имеют фиксированной ширины, поэтому пространство flex-контейнера будет распределятся в зависимости от значения свойства flex-grow:

#myBlueDiv {
flex-grow: 0;
}

flex-shrink | CSS | WebReference

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

Краткая информация

Значение по умолчанию1
НаследуетсяНет
ПрименяетсяК флекс-элементам
АнимируетсяДа

Синтаксис

flex-shrink: <число>

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-shrink</title> <style> .flex-container { display: flex; } .flex1 { flex-shrink: 3; margin-right: 2rem; } .flex1 img { width: 100%; } .flex2 { flex-shrink: 2; } </style> </head> <body> <div> <div><img src="image/aquaria.jpg" alt=""></div> <div>Понравились готовые инсталляции, некоторые даже без рыбок смотрятся так, что хочется фотографию на рабочий стол поставить и любоваться.</div> </div> </body> </html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-shrink.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.08.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

flex-basis | CSS | WebReference

Свойство flex-basis определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяК флекс-элементам
АнимируетсяДа

Синтаксис

flex-basis: auto | <размер>

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

auto
Указывает автоматический размер, основанный на содержимом элемента.
<размер>
Задаёт размер элемента в px, mm, pt или в процентах вдоль главной оси. При этом размер вычисляется относительно родителя. Отрицательное значение недопустимо.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-basis</title> <style> .flex-container { display: flex; /* Флексы */ height: 300px; /* Высота */ color: #fff; /* Белый цвет текста */ font-size: 2.6em; /* Размер шрифта */ flex-flow: column wrap; /* Располагаем в виде колонок */ } .flex-item { display: flex; /* Флексы */ align-items: center; /* Выравнивание текста по вертикали */ justify-content: center; /* Выравнивание текста по горизонтали */ } .one { background: #508694; /* Цвет фона */ margin-right: 10px; /* Отступ справа */ flex-basis: 100%; order: 1; /* Первый блок */ } .two { background: #BB844C; /* Цвет фона */ margin-bottom: 10px; /* Отступ снизу */ flex: 1 1 0; order: 2; /* Второй блок */ } .three { background: #929D79; /* Цвет фона */ flex: 1 1 0; order: 3; /* Третий блок */ } </style> </head> <body> <div> <div>Первый</div> <div>Второй</div> <div>Третий</div> </div> </body> </html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-basis.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 15.05.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *