Содержание

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

Устанавливает коэффициент сжатия элемента контейнера flexbox 

flex-shrink: 1;

Пошаговый план! Как быстро научиться создавать сайты!

  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

flex-shrink: 0;

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

Существует вероятность переполнения содержимого контейнера flexbox, если для него не задан flex-wrap: wrap;

<style>
.example-1 {
    display: flex;    
    outline: 2px dashed #ccc;
}
.example-1-item {
    padding: 5px;
    margin: 2px;
    background: #8ee391;
}
.shrink-0 {
    width: 330px;
    flex-shrink: 0;   
}
</style>

<div>
    <div>текст текст текст</div>
    <div>текст текст</div>
    <div>текст</div>
</div>

текст текст текст

текст текст

текст

flex-shrink: 1;

Элемент будет сжиматься при необходимости

<style>
. example-2 {
    display: flex;    
    outline: 2px dashed #ccc;
}
.example-2-item {
    flex-shrink: 1;
    padding: 5px;
    margin: 2px;
    background: #8ee391;
}
</style>

<div>
    <div>текст текст текст текст текст текст</div>
    <div>текст текст текст текст текст текст</div>
    <div>текст текст текст текст текст текст</div>
</div>

текст текст текст текст текст текст

текст текст текст текст текст текст

текст текст текст текст текст текст

flex-shrink: 2;

Значение flex-shrink является относительным, его поведение зависит от значения родственных элементов контейнера flexbox. 

Если в контейнере находятся три элемента, один из них пытается занять много пространства, у второго flex-shrink: 1; а у третьего flex-shrink: 2; Необходимое, первому элементу, пространство будет взято от элемента с

flex-shrink: 2; в два раза больше чем от элемента с flex-shrink: 1;

<style>
. example-3 {
    display: flex;    
    outline: 2px dashed #ccc;
}
.example-3-item {
    flex-shrink: 0;
    padding: 5px;
    margin: 2px;
    background: #8ee391;
}
.shrink-1 {
    flex-shrink: 1;
}
.shrink-2 {
    flex-shrink: 2;
}
</style>

<div>
    <div>текст текст текст текст текст текст</div>
    <div>текст текст текст текст текст текст</div>
    <div>текст текст текст текст текст текст</div>
</div>

текст текст текст текст текст текст

текст текст текст текст текст текст

текст текст текст текст текст текст

Читайте также
Обсуждение (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.

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

СпецификацияСтатус
CSS Flexible Box Layout Module Level 1Возможная рекомендация

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

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

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

Браузеры

11132912.16.1928
4.42812.17.19.2

Браузеры

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

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

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

Флексы

См. также

  • Макет сайта на флексбоксах
  • Свойства flex-элементов

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

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

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

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

Свойство CSS flex-shrink

❮ Назад Полное руководство по CSS Далее ❯


Пример

Пусть второй flex-элемент уменьшится в три раза больше, чем остальные:

div:nth-of-type(2) {
  flex-shrink: 3;
}

Попробуйте сами »

Определение и использование

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

Примечание: Если элемент не является гибким, свойство flex-shrink не действует.

Значение по умолчанию: 1
Унаследовано: нет
Анимация: да. Читать о анимированном Попытайся
Версия: CSS3
Синтаксис JavaScript: объект
.style.flexShrink=»5″ Попытайся

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

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

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Собственность
гибкий термоусадочный 29,0
21,0 -вебкит-		 11,0 28. 0
18.0 -моз-		 9.0
6.1 -вебкит-		 17,0

Синтаксис CSS

flex-shrink: number |initial|inherit;

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

Значение Описание Играй
номер Число, указывающее, насколько элемент будет уменьшаться по сравнению с остальными гибкими элементами. Значение по умолчанию 1 Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный Играй »
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS: CSS Flexible Box

Справочник по CSS: свойство flex

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

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

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

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

Справочник CSS: свойство flex-wrap : свойство flexShrink

❮ Предыдущий Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

гибкая термоусадочная | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство flex-shrink является подсвойством модуля Flexible Box Layout.

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

 .элемент {
  гибкая термоусадка: 2;
}

Если этот параметр опущен, он устанавливается равным 1 , а коэффициент гибкости умножается на базис гибкости при распределении отрицательного пространства.

Синтаксис 

 flex-shrink:

Демонстрация

Чтобы увидеть весь потенциал этой демонстрации, вы должны иметь возможность изменять ее ширину, поэтому, пожалуйста, взгляните на нее непосредственно на CodePen.

В этой демонстрации:

  • Первый элемент имеет flex: 1 1 20em (сокращение от flex-grow: 1 , flex-shrink: 1 , flex-basis: 20em )
  • Второй элемент имеет , flex-shrink: 2 , flex-basis: 20em )

Оба flex-элемента должны иметь ширину 20em. Из-за flex-grow (первый параметр), если flex-контейнер больше 40em, второй дочерний элемент займет в два раза больше остаточного пространства, чем первый дочерний элемент. Но если родительский элемент имеет ширину менее 40em, то у второго дочернего элемента будет вдвое больше, чем у первого дочернего элемента, что сделает его меньше (из-за второго параметра, flex-shrink).

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

  • (современный) означает последний синтаксис из спецификации (например, display: flex; )
  • (гибрид) означает странный неофициальный синтаксис 2011 года (например, display: flexbox; (
  • 4 )
    4 old) means the old syntax from 2009 (e. g. display: box; )
IE Edge Firefox Chrome Safari Opera
10+ All 20+ 22+ 8+ 12.1+
12,1+ 12. 1+ 12.1+

Для получения дополнительной информации о том, как смешивать синтаксис, чтобы получить наилучшую поддержку браузера, обратитесь к разделу «Использование Flexbox» или этой статье от DevOpera.

More information

  • flex-shrink in the spec
  • flex-shrink at MDN
  • Advanced cross-browser flexbox
  • A guide to Flexbox
  • Using Flexbox
  • Old Flexbox and new Flexbox

Понимание flex-grow, flex-shrink и flex-basis

`flex-grow` это странно.

Или это?

Мыслительный процесс, стоящий за макетом Flexbox

Как заставить ширину и гибкие элементы хорошо сочетаться друг с другом

Равные столбцы с Flexbox: это сложнее, чем вы думаете

Разработка макета страницы продукта с помощью Flexbox

Авторазмещение сетки, совместимой с IE10, с помощью Flexbox

сгибаться

.элемент { flex: 1 1 100px; }

гибкая основа

.элемент { flex-basis: 100px; }

flex-направление

.element { flex-direction: column-reverse; }
iOS Chrome Android Firefox Android Android Opera Mobile
8+ ALL ALL 92+ 12,1+