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
Редакторы: Влад Мержевич
Свойство 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+ | 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
Редакторы: Влад Мержевич
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
Редакторы: Влад Мержевич