Почему не работает display flex
Перейти к содержимому

Почему не работает display flex

  • автор:

Почему не работает display: flex; flex-direction: row;?

Работает. По умолчанию justify-content равен flex-start, вот элемент hi__body и находится с левого края. Для того чтобы действие «flex-direction: row» было заметней, нужно задать другое значение для justify-content (center например) или добавить еще один элемент (или несколько) по соседству с hi__body. Прошу прощения если неправильно понял проблему.

Ответ написан более года назад

Комментировать

Нравится Комментировать

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Можно ли убрать подчеркивание ссылки в HTML не прибегая к CSS?

  • 1 подписчик
  • 3 часа назад
  • 63 просмотра

Как реально работают flex — shrink и flex — grow

Механизм расчёта свободного места во флекс-контейнере при помощи свойств flex — grow и flex — shrink .

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

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

  1. flex-grow
    1. Что ещё здесь важно помнить?

    Обновлено 2 октября 2023

    flex — grow и flex — shrink — это CSS-свойства, определяющие, какое количество свободного пространства флекс-контейнера может занимать текущий элемент.

    Рассмотрим каждое свойство в отдельности.

    flex — grow

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

    Создадим флекс-контейнер с двумя вложенными элемента с разными значениями flex — grow .

       flex-grow: 2; flex-grow: 1;  div class="container"> code class="container-item-grown">flex-grow: 2;code> code class="container-item-common">flex-grow: 1;code> div>      
     .container  display: flex; width: 1200px; height: 100px;> .container-item-grown  background-color: #2E9AFF; flex-grow: 2;> .container-item-common  background-color: #F498AD; flex-grow: 1;> .container  display: flex; width: 1200px; height: 100px; > .container-item-grown  background-color: #2E9AFF; flex-grow: 2; > .container-item-common  background-color: #F498AD; flex-grow: 1; >      

    У нас есть контейнер шириной 1200 px, для первого элемента указан flex — grow : 2 , а для второго — flex — grow : 1 . Первый элемент занимает 800 px, а второй 400 px.

    Хочется думать, что здесь всё просто и работает по правилам математики:

    • сложить значения свойства для каждого контейнера и получить 3 (2 + 1);
    • поделить ширину контейнера на общее количество «частей» и получить 400 px (1200 px / 3);
    • для каждого блока использовать значение flex — grow как вес и умножить на ширину одной части;
    • для первого блока 400 px * 2 = 800 px;
    • для второго блока 400 px * 1 = 400 px.

    Пока всё верно. Однако, часто на практике мы ожидаем, что сейчас мы укажем flex — grow и это нас спасёт и… не работает.

    Вот пример, такого «не работает».

         Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.     Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.    div class="container"> div class="container-item-grown"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>      
     .container  display: flex; width: 1200px;> .container-item-grown  background-color: #2E9AFF; flex-grow: 2;> .container-item-common  background-color: #F498AD; flex-grow: 1;> .container  display: flex; width: 1200px; > .container-item-grown  background-color: #2E9AFF; flex-grow: 2; > .container-item-common  background-color: #F498AD; flex-grow: 1; >      

    Пример отличается от предыдущего тем, что в блоках появился текст, обёрнутый в параграф. И результат таков, что блоки стали одинаковыми по ширине.

    Получается, что логика рассуждений, приведённая выше, не работает?
    Не совсем так, давайте разбираться.

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

    Почему же в первом примере всё работает ожидаемо? Там логика сработала, потому что для блоков не указана ширина и в них нет вложенных элементов, а значит ширина обоих 0 px, и свободное место — это и есть ширина контейнера, то есть 1200 px.

    И что, если свободного места нет, то использовать flex — grow не получится? Не совсем, нужно просто добавить свойство flex — basis . Если использовать эти свойства в комплекте, то алгоритм расчёта ширины изменится.

    flex — basis — это свойство, которое устанавливает начальный основной размер флекс-элемента. Его можно задать в любых единицах, в которых можно задать ширину элемента.

    В результате мы получим то, чего хотим.

         Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.     Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.    div class="container"> div class="container-item-grown"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>      
     .container  display: flex; width: 1200px;> .container-item-grown  background-color: #2E9AFF; flex-grow: 2; flex-basis: 800px;> .container-item-common  background-color: #F498AD; flex-grow: 1; flex-basis: 400px;> .container  display: flex; width: 1200px; > .container-item-grown  background-color: #2E9AFF; flex-grow: 2; flex-basis: 800px; > .container-item-common  background-color: #F498AD; flex-grow: 1; flex-basis: 400px; >      

    Ещё один пример без flex — basis для закрепления. Попробуем задать ширину параграфов: для первого параграфа зададим 300 px, а для второго 600 px.

         Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.     Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.    div class="container"> div class="container-item-grown"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>      
     .container  display: flex; width: 1200px;> .container-item-grown  background-color: #2E9AFF; flex-grow: 2;> .container-item-common  background-color: #F498AD; flex-grow: 1;> .container-item-grown p  width: 300px;> .container-item-common p  width: 600px;> .container  display: flex; width: 1200px; > .container-item-grown  background-color: #2E9AFF; flex-grow: 2; > .container-item-common  background-color: #F498AD; flex-grow: 1; > .container-item-grown p  width: 300px; > .container-item-common p  width: 600px; >      

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

    • Первый блок занимает 300 px. Это свойство задано для селектора p .
    • Второй блок занимает 600 px. Причина всё та же — так задано в дочернем элементе.
    • Итого, для распределения свойством flex — grow остаётся 300 px. Далее применим логику, которая была описана чуть выше, и…
    • На первый элемент придётся 200 px, а на второй — всего 100 px.
    • В итоге первый элемент займёт 500 px (300 px + 200 px), а второй — 700 px (600 px + 100 px).

    Что ещё здесь важно помнить?

    Скопировать ссылку «Что ещё здесь важно помнить?» Скопировано

    Как работает свойство box-sizing. Вычисление свойства flex — basis также, как и свойства width зависит от box — sizing , и результат, в зависимости от указанного значения, будет разным.

    flex — shrink

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

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

         Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.     Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.    div class="container"> div class="container-item-shrikned"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>      
     .container  display: flex; width: 800px;> .container-item-shrinked  background-color: #2E9AFF; flex-shrink: 2; flex-basis: 400px;> .container-item-common  background-color: #F498AD; flex-shrink: 1; flex-basis: 800px;> .container  display: flex; width: 800px; > .container-item-shrinked  background-color: #2E9AFF; flex-shrink: 2; flex-basis: 400px; > .container-item-common  background-color: #F498AD; flex-shrink: 1; flex-basis: 800px; >      

    У нас в примере два элемента, у каждого есть изначальная ширина ( flex — basis равен 400 px и 800 px соответственно). Итого 1200 px. Однако ширина флекс-контейнера всего 800 px.

    Сначала посчитаем общий вес при том, что для первого элемента значение flex — shrink составляет 2, а для второго — 1: 2 * 400 px + 1 * 800 px = 1600 px.
    Для полноценного размещения нам не хватает 1200 px — 800 px = 400 px.

    Подсчёт сокращения будет выглядеть следующим образом:

    • Пространство, которого не хватает, умножим на значение flex — shrink .
    • Затем результат умножим на значение flex — basis .
    • Результат предыдущего действия разделим на общий вес.
    • 400 px * 2 * 400 px / 1600 px = 200 px
    • 400 px * 1 * 800 px / 1600 px = 200 px

    А в результате ширина блоков будет следующая:

    • 400 px — 200 px = 200 px
    • 800 px — 200 px = 600 px

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

    Ошибки, которые могут возникать при использовании flexbox, и их решение

    Flexbox стремительно набирает популярность благодаря своей гибкости и адаптивности. Использование этого элемента позволяет легко верстать макеты, которые раньше заставляли попотеть. Основная проблема flexbox в том, что этот довольно новый элемент не гарантирует вам стабильную работу во всех используемых браузерах. Довольно часто встречаются случаи, когда стандартные решения не приносят ожидаемого результата. В этой статье мы рассмотрим некоторые ошибки и пути их решения.

    1.Искажение вложенных объектов, размер которых больше размера ячейки

    Эта ошибка встречается в Chrome, Opera и Safari. Когда элементы имеют слишком большие размеры, чтобы поместиться внутри контейнера, они должны быть трансформированы, чтобы уменьшить их так, как это определяет свойство flex-shrink. При этом объекты уменьшаются не бесконечно, они не могут получить размеры меньшие, чем их минимальная высота и минимальная ширина.

    В соответствии с текущей спецификацией flexbox:

    По умолчанию, элементы не будут сжиматься меньше их минимального размера (длина самого длинного слова или фиксированного размера элемента). Чтобы изменить это, установите свойства min-width или min-heigh.

    Решение

    Спецификация Flexbox говорит нам, что свойство flex-shrink имеет значение по умолчанию равное 1, но также указывает, что детали не должны сжиматься меньше их минимального размера по умолчанию. Вы можете использовать значение 0 для flex-shrink, что позволит вам избежать этой ошибки. Если ваши элементы рассчитывают свои размеры, исходя из размеров родителей, и не имеют заданных свойств width, height или flex-basis, в остальном они будут вести себя также.

    2. Содержимое flex-элемента, для которого установлено align-items:center, выходит за рамки элемента

    Ошибка встречается в Internet Explorer 10-11. При использовании align-items:center для контейнера, его содержимое, если оно имеет достаточно большой размер, будет выходить за рамки объекта.

    Решение

    В большинстве случаев это может быть исправлено установкой максимальной ширины 100% для контейнера. Если flex-элемент имеет box-sizing:border-box, вы должны убедиться, что указанные размеры учитывают эти свойства. Если вы используете box-sizing, это решение не будет работать, в таком случае вам придется использовать дополнительный контейнер внутри основного.

    3. Ошибка с обработкой min-height, указанного для колонок

    Для того чтобы элементы могли определять свои размеры и позиционирование, они должны знать о размерах контейнера, в который они помещены. Например, чтобы центрировать объект по вертикали, необходимо знать высоту его родителя. В IE 10-11 объекты ведут себя так, как будто не догадываются о свойствах своих родителей.

    Решение

    Самым распространенным решением является установка height: 100vh (или 100%). В таком случае, если в контейнер будет помещено слишком много содержимого, появится полоса вертикальной прокрутки. Бывают случаи, когда такое решение не будет работать, тогда используйте определение браузера.

    4. Ошибка обработки короткой записи значений свойства flex

    Раньше спецификация flexbox требовала использовать полную запись:

    Если preferred-size равен 0, это должно быть указано, например, \»0px\», чтобы избежать двусмысленности, в другом случае возникнет синтаксическая ошибка.

    Это требование уже неактуально, но IE 10-11 все еще воспринимает его всерьез.

    Решение

    Всегда явно указывайте preferred-size.

    Важно: используя значения вроде 1 0 0px, вы все еще можете столкнуться с проблемой, потому что многие минимизаторы CSS будут конвертировать 0px в 0. Чтобы избежать этого, убедитесь, что используете 0% вместо 0px, так как большинство минимизаторов не убирают процентные значения.

    5. Нарушение пропорций некоторых элементов

    Спецификация 2014 года описывает определение размера flex-элемента следующим образом:

    Размер элемента, переполнения которого не видно, приравнивается к меньшему из значений: а) min-content; б) width/height, если они указаны.

    В случае если вы пытаетесь вписать изображение размерами 200×500 пикселей, а ширина контейнера составляет всего 300 пикселей, изображение будет масштабировано для того, чтобы вписаться в контейнер. В итоге высота изображения получит значение 120 пикселей. Из приведенной выше спецификации неясно, какое значение высоты изображения будет использовано для расчета высоты контейнера: 200 или 120.

    Последняя спецификация решила эту проблему в пользу размеров, которые не нарушают пропорций вложенного объекта, но IE 10-11 все еще работает по старой спецификации.

    Решение

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

    6. Изменилось значение Flex по умолчанию

    Когда IE 10 только разрабатывался, значение flex по умолчанию устанавливалось none, что аналогично (0 0 auto). Недавняя спецификация определила стартовым значением (0 1 auto). Это значит, что IE 10 использует схему масштабирования, отличную от других браузеров.

    Решение

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

    7. Flex-basis не учитывает box-sizing:border-box

    Ошибка, которая встречается в Internet Explorer 10-11.

    Явное указание flex-basis должно действовать так же, как и width или height. Оно определяет размер элемента и все примененные к нему свойства, чтобы увеличить или уменьшить свои размеры соответственно. Но Internet Explorer 10-11 всегда использует box model гибкого элемента, даже если для него установлены box-sizing:border-box.

    Решение

    Есть два способа обойти эту ошибку. Первый не требует дополнительной разметки, но второй более гибкий:

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

      8. Отсутствие поддержки Calc () при сокращенной записи

      Internet Explorer 10-11 игнорирует сокращенную запись значений flex, которая использует calc() при описании flex-basis.

      Решение

      Эта ошибка проявляется только при короткой записи, так что если вам необходимо использовать Calc (), указывайте каждое свойство индивидуально.

      9. Button не становится flex-контейнером

      В отличие от input, элементы типа \»button\» или \»submit\» могут содержать дочерние элементы. Это позволяет вставлять что-то кроме текста, не нарушая семантику. Однако Firefox не позволяет использовать этот прием.

      Решение

      Простое решение этой проблемы заключается в использовании оболочки для Button со свойством display:flex.

      Как исправить display: flex, если он не работает должным образом?

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

      5ff61178e1268777002436.png

      HTML

      .shop_slider < .top_title_line < min-height: 81px; background: linear-gradient(#ff6c22, #ff4616); display: flex; align-items: center; color: #fff; .fredoka_font(); .shop_box_title < flex-grow: 1; text-align: center; >.left, .right < display: block; opacity: 50%; >> >
      .shop_slider .top_title_line < min-height: 81px; background: linear-gradient(#ff6c22, #ff4616); display: flex; align-items: center; color: #fff; font-family: 'Fredoka One', cursive; >.shop_slider .top_title_line .shop_box_title < flex-grow: 1; text-align: center; >.shop_slider .top_title_line .left, .shop_slider .top_title_line .right

      5ff610e2543e9033992345.png

      Поставить display block дочерним элементам не помогает, как и выставление width 100% на родительский.

      5ff6125571156589452761.png

      Хочу так:

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

      Комментировать
      Решения вопроса 1
      web-программист (*AMP, Go, JavaScript, вёрстка).

      Ну так flex в top_title_line действует только на единственный вложенный тег shop_slider_navigation — никак не влияя на теги внутри shop_slider_navigation.

      А чтобы распределить блоки внутри shop_slider_navigation, надо и display: flex; и настройки flex установить для shop_slider_navigation.

      P.S. В редакторе вопроса есть кнопка вставки кода — с помощью которой можно нормально вставить и HTML, и CSS. Делать HTML картинкой не имеет смысла и только мешает отвечающим.

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

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