Как запретить flex элементу сжиматься
Перейти к содержимому

Как запретить flex элементу сжиматься

  • автор:

Как запретить flexbox контейнеру сжиматься, если контент в него уже не помещается?

Есть страница, на которой header неизвестного размера и content, который растягивается на все оставшееся место.
В content положены три блока: top, area, bottom. Top и bottom неизвестной высоты, area — должна занимать оставшееся место и имеет минимальную высоту (допустим 50px).

5a7a6906c0adb529778758.png

Текущее поведение: при уменьшении высоты страницы, content продолжает сжиматься, даже когда top,area,bottom блоки уже из него вылазят.
Ожидаемое поведение: content сжимается до тех пор пока внутренние блоки в нем помещаются. После этого сжатие останавливается.

Если бы была известна высота блоков, я бы выставил минимальную высоту content контейнеру, но высота не известна.
Как правильно реализовать нужное поведение?

  • Вопрос задан более трёх лет назад
  • 3897 просмотров

Элементы flex-box сжимаются даже с заданной шириной. Это нормальное поведение?

Начал изучать flex-box. Подскажите, это нормально когда у элементов задана ширина, но при уменьшении экрана блоки всё равно сжимаются. Так и должно быть у флексов? Если да, то как сделать чтобы флекс не сжимался , а перескакивал на следующую строчку? Вот пример, в котором я это увидел: https://jsfiddle.net/api/post/library/pure/

  • Вопрос задан более трёх лет назад
  • 9372 просмотра

1 комментарий

Оценить 1 комментарий

Гайд по flexbox

Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

Время чтения: 12 мин

Открыть/закрыть навигацию по статье

  1. Что это?
  2. Основные термины
  3. Свойства флекс-контейнера
    1. display
    2. flex-direction
    3. flex-wrap
    4. flex-flow
    5. justify-content
    6. align-items
    7. align-content
    8. gap
    1. order
    2. flex-grow
    3. flex-shrink
    4. flex-basis
    5. flex
    6. align-self
    7. Ссылки
    1. Андрей Захаров советует
    2. Егор Левченко советует
    3. Алёна Батицкая советует
    1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

    Контрибьюторы:

    • Егор Левченко ,
    • Светлана Коробцева ,
    • Дмитрий Приходько ,
    • Дима Шелков

    Обновлено 12 апреля 2024

    Что это?

    Скопировать ссылку «Что это?» Скопировано

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

    Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).

    Основные термины

    Скопировать ссылку «Основные термины» Скопировано

    • Флекс-контейнер: элемент, к которому применяется свойство display : flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
    • Флекс-элемент: элемент, вложенный во флекс-контейнер.

    Пример флекс-контейнера и вложенных в него флекс-элементов

    • Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы.
    • Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна.

    Наглядный вид основной оси и поперечной оси

    • Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
    • Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.

    Наглядный вид начала/конца основной оси и начала/конца поперечной оси

    • Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
    • Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.

    Наглядный вид размера по основной оси и по поперечной оси

    Свойства флекс-контейнера

    Скопировать ссылку «Свойства флекс-контейнера» Скопировано

    display

    Скопировать ссылку «display» Скопировано

     .container  display: flex;> .container  display: flex; >      

    Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.

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

     .container  display: inline-flex;> .container  display: inline-flex; >      

    Если контейнеру задано значение inline — flex , то снаружи он начинает вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, встаёт в строку с другими элементами. Внутри это ровно такой же флекс-контейнер, как и при предыдущем значении.

    flex — direction

    Скопировать ссылку «flex-direction» Скопировано

    Свойство управления направлением основной и поперечной осей.

     .container  display: flex; flex-direction: row;> .container  display: flex; flex-direction: row; >      
    • row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
    • row — reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
    • column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
    • column — reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.

    Пример свойства flex-direction

    Пример свойства flex-wrap

    flex — flow

    Скопировать ссылку «flex-flow» Скопировано

    Это свойство-шорткат для одновременного определения значений свойств flex — direction и flex — wrap .

     .container  display: flex; flex-flow: column wrap;> .container  display: flex; flex-flow: column wrap; >      
     .container  display: flex; flex-flow: row nowrap;> .container  display: flex; flex-flow: row nowrap; >      

    Пример свойства флекс-элементов order

    flex — grow

    Скопировать ссылку «flex-grow» Скопировано

     .container  display: flex;> .item  flex-grow: 1;> .container  display: flex; > .item  flex-grow: 1; >      

    Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

    Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.

    Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.

    flex — shrink

    Скопировать ссылку «flex-shrink» Скопировано

     .container  display: flex;> .item  flex-shrink: 3;> .container  display: flex; > .item  flex-shrink: 3; >      

    Свойство flex — shrink полностью противоположно свойству flex — grow . Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.

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

    Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

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

    flex — basis

    Скопировать ссылку «flex-basis» Скопировано

     .container  display: flex;> .item  flex-basis: 250px;> .container  display: flex; > .item  flex-basis: 250px; >      

    Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

    Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

    Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.

    flex

    Скопировать ссылку «flex» Скопировано

     .container  display: flex;> .item  flex: 1 1 auto;> .container  display: flex; > .item  flex: 1 1 auto; >      

    Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex — grow , flex — shrink и flex — basis . Первое значение является обязательным, остальные опциональны.

    Значение по умолчанию: 0 1 auto , что расшифровывается как flex — grow : 0 , flex — shrink : 1 , flex — basis : auto .

     /* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset; /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;      

    align — self

    Скопировать ссылку «align-self» Скопировано

     .container  display: flex; align-items: flex-start;> .item  align-self: flex-end;> .container  display: flex; align-items: flex-start; > .item  align-self: flex-end; >      

    При помощи этого свойства можно выровнять один или несколько элементов иначе, чем задано у родительского элемента. Например, в коде выше у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.

    Ссылки

    Скопировать ссылку «Ссылки» Скопировано

    1. Как реально работает flex — grow
    2. Как реально работает flex — shrink
    3. Песочница Флексбоксов
    4. Game: Flexbox Froggy
    5. Game: Flexbox Defense
    6. Game: Flexbox Ducky
    7. Курс по Флексбоксам от Wes Bos

    Управление элементами. flex-basis, flex-shrink и flex-grow¶

    Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые позволяют управлять элементами:

    • flex-basis : определяет начальный размер flex-элемента
    • flex-shrink : определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере
    • flex-grow : определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

    flex-basis¶

    Flex-контейнер может увеличиваться или уменьшаться вдоль своей центральной оси, например, при изменении размеров браузера, если контейнер имеет нефиксированные размеры. И вместе с контейнером также могут увеличиваться и уменьшаться его flex-элементы. Свойство flex-basis определяет начальный размер flex-элемента до того, как он начнет изменять размер, подстраиваясь под размеры flex-контейнера.

    Это свойство может принимать следующие значения:

    • auto : начальный размер flex-элемента устанавливается автоматически
    • content : размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать
    • числовое значение : мы можем установить конкретное числовое значение для размеров элемента
     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
     html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; > .flex-item  text-align: center; font-size: 1em; padding: 1.2em; color: white; > .item1  background-color: #675ba7; flex-basis: auto; width: 150px; > .item2  background-color: #9bc850; flex-basis: auto; width: auto; > .item3  background-color: #a62e5c; flex-basis: 200px; width: 150px; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div> body> html> 

    Управление элементами. flex-basis, flex-shrink и flex-grow

    У первого элемента у свойства flex-basis установлено значение auto . Поэтому первый элемент в качестве реального значения для ширины будет использовать значение свойства width .

    У второго элемента у свойства flex-basis установлено значение auto , однако и свойство width имеет значение auto . Поэтому реальная ширина элемента будет устанавливаться по его содержимому.

    У третьего элемента свойство flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже не играет никакой роли.

    flex-shrink¶

    Если flex-контейнер имеет недостаточно места для размещения элемента, то дальнейшее поведение этого элемента мы можем определить с помощью свойства flex-shrink . Оно указывает, как элемент будет усекаться относительно других элементов.

    В качестве значения свойство принимает число. По умолчанию его значение 1 .

    Рассмотрим действие этого свойства на примере:

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
     html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; width: 400px; > .flex-item  text-align: center; font-size: 1em; padding: 1.2em; color: white; > .item1  background-color: #675ba7; flex-basis: 200px; flex-shrink: 1; > .item2  background-color: #9bc850; flex-basis: 200px; flex-shrink: 2; > .item3  background-color: #a62e5c; flex-basis: 200px; flex-shrink: 3; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div> body> html> 

    Управление элементами. flex-basis, flex-shrink и flex-grow

    В данном случае начальная ширина каждого элемента равна 200px , то есть совокупная ширина составляет 600px . Однако ширина flex-контейнера составляет всего 400px . То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в действие вступает свойство flex-shrink , которое определено у элементов.

    Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения значения свойства flex-basis на flex-shrink . Таким образом, для трех элементов мы получим следующие вычисления:

    1 2 3 4 5 6
    // первый элемент 200px * 1 = 200 // второй элемент 200px * 2 = 400 // третий элемент 200px * 3 = 600 

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

    flex-grow¶

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

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

    Итак, используем свойство flex-grow :

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
     html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; > .flex-item  text-align: center; font-size: 1em; padding: 1.3em; color: white; > .item1  background-color: #675ba7; flex-grow: 0; > .item2  background-color: #9bc850; flex-grow: 1; > .item3  background-color: #a62e5c; flex-grow: 2; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div> body> html> 

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

    Управление элементами. flex-basis, flex-shrink и flex-grow

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

    Управление элементами. flex-basis, flex-shrink и flex-grow

    Так как у первого элемента свойство flex-grow равно 0 , то первый элемент будет иметь константные постоянные размеры. У второго элемента flex-grow равно 1 , а третьего — 2 . Таким образом, в сумме они дадут 0 + 1 + 2 = 3 . Поэтому второй элемент будет увеличиваться на 1/3 дополнительного пространства, на которое растягивается контейнер, а третий элемент будет получать 2/3 дополнительного пространства.

    Свойство flex¶

    Свойство flex является объединением свойств flex-basis , flex-shrink и flex-grow и имеет следующий формальный синтаксис:

    flex: [flex-grow] [flex-shrink] [flex-basis]; 

    По умолчанию свойство flex имеет значение 0 1 auto .

    Кроме конкретных значений для каждого из подсвойств мы можем задать для свойства flex одно из трех общих значений:

    • flex: none : эквивалентно значению 0 0 auto , при котором flex-элемент не растягивается и не усекается при увеличении и уменьшении контейнера
    • flex: auto : эквивалентно значению 1 1 auto
    • flex: initial : эквивалентно значению 0 1 auto

    Так, применим свойство flex:

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
     html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; width: 600px; > .flex-item  text-align: center; font-size: 16px; padding: 10px 0; color: white; > .item1  background-color: #675ba7; width: 150px; flex: 0 0 auto; > .item2  background-color: #9bc850; width: 150px; flex: 1 0 auto; > .item3  background-color: #a62e5c; width: 150px; flex: 0 1 auto; > .item4  background-color: #2a9fbc; width: 150px; flex: 1 1 auto; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div class="flex-item item4">Flex Item 4div> div> body> html> 

    Управление элементами. flex-basis, flex-shrink и flex-grow

    Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0 , что в целом для всех элементов будет составлять 600 пикселей.

    При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих элементов это свойство равно 1 , то оба элемента будут уменьшаться в равных долях.

    При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И также, так как это свойство равно 1 , то эти элементы будут увеличиваться в равных долях.

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

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