Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

CSS свойство flex-shrink. Flex css поддержка браузерами


Генератор flex, flexbox

Описание flex генератора

Общие сведения

Основная идея flex генератора сделать удобным процесс разработки flex конструкций: обеспечив наглядность и предоставив широкий набор дополнительных настроек. Данный генератор предоставляется бесплатно и без каких-либо ограничений на сайте cssworld.ru.

Для простоты, здесь и далее, контейнером называется родительский элемент, а блоками называются дочерние элементы flex технологии.

Использование

Каждый параметр имеет возможность выбора предустановленных значений. Значения по умолчанию выделены фоном. Параметры предусматривающие произвольные значения можно изменять самостоятельно.

В самом низу, под визуальным просмотром, отображается CSS код для текущих установленных значений контейнера, выделенного блока, либо общие значения блоков при отсутствии выделения.

Для удобства, процесс поделен на три последовательные составные части, размещенных в соответствующих вкладках, а также текущий справочный раздел: Контейнер, Блоки, Результат

1. Контейнер

Настройка контейнера flex блоков через установку параметров. Данные настройки имеют отношение исключительно к родительскому элементу flex блоков.

2. Блоки

Настройка flex блоков. Возможно установить количество дочерних блоков, сбросить значения до установленных по умолчанию, установить значения общие для всех блоков или для каждого отдельные значения.

Для установки значений конкретному блоку его необходимо предварительно выделить. Выделение блока возможно по клику на нем. Повторный клик снимает выделение. То же самое делает кнопка "Готово" отображаемая при выделенном элементе, а также переключение на другую вкладку снимает выделение.

У выделенного элемента возможно изменить контент (его текстовое наполнение), а также отдельно для него установить и очистить установленные значения.

3. Результат

Помимо результата, отображающего полный код CSS стилей и HTML, здесь возможно установить ряд настроек совместимости не влияющих на визуализацию.

Поддержка старых браузеров

Поддержка включается во вкладке "Результат" при включенной отметке "Поддержка старых браузеров (префиксы)". Данное действие добавляет предшествующие параметры с префиксами -ms- (только для IE10) и -webkit- (все остальные браузеры).

cssworld.ru

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

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

webref.ru

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

CSS свойства

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

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

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

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

CSS синтаксис:

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

JavaScript синтаксис:

object.style.flexShrink = "3"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

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

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

basicweb.ru

flex | CSS | WebReference

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

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

Значение по умолчаниюНаследуетсяПрименяетсяАнимируется
flex-grow: 0flex-shrink: 1flex-basis: auto
Нет
К флекс-элементам
Да

Обозначения

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

Значения

noneСоответствует значению 0 0 auto.

Смотрите отдельные свойства для их значений.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex</title> <style> body { margin: 0; /* Убираем отступы */ display: flex; /* Включаем флексы */ height: 100vh; /* Занимает всю высоту */ flex-direction: column; /* Главная ось располагается вертикально */ } main { flex: 1; /* Соответствует flex: 1 1 0% */ } footer { background: #e4efc7; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <main> </main> <footer>Подвал</footer> </body> </html>

В данном примере подвал располагается внизу веб-страницы.

Объектная модель

Примечание

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

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

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

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

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

Браузеры

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

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

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

×

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

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

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

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

webref.ru

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

CSS свойства

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

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

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

Например, если в контейнере все блоки имеют значение свойства flex-growcss3 равное 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 свойства

basicweb.ru

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

CSS свойства

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

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

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

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

CSS синтаксис:

flex-basis:"auto | width | initial | inherit";

JavaScript синтаксис:

object.style.flexBasis = "100px"

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

ЗначениеОписание
autoРазмер равен размеру флекс элемента. Если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания элемента. Это значение по умолчанию.
widthОпределяет размер для флекс элемента, установленный по умолчанию перед распределением пространства в контейнере. Допускается использование как абсолютных значений (px, em, pt и так далее), так и значения в процентах. Отрицательные значения не допускаются.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

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

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

basicweb.ru


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..