У меня 4 столбца flexbox, и все работает нормально, но когда я добавляю текст в столбец и устанавливаю для него большой размер шрифта, он делает столбец шире, чем должно быть из-за свойства flex.

Я пытался использовать word-break: break-word, и это помогло, но все же, когда я уменьшаю размер столбца до очень маленькой ширины, буквы в тексте разбиваются на несколько строк (одна буква на line), и все же столбец не становится меньше ширины одного размера буквы.

Посмотрите это видео (в начале первый столбец самый маленький, но когда я изменил размер окна, это самый широкий столбец. Я просто хочу всегда соблюдать настройки гибкости; размеры гибкости 1: 3: 4: 4)

Я знаю, установка меньшего размера шрифта и отступа столбцов поможет ... но есть ли другое решение?

Не могу использовать overflow-x: hidden.

JSFiddle

.container {
  дисплей: гибкий;
  ширина: 100%
}
.col {
  минимальная высота: 200 пикселей;
  отступ: 30 пикселей;
  word-break: break-word
}
.col1 {
  гибкость: 1;
  фон: оранжевый;
  размер шрифта: 80 пикселей
}
.col2 {
  гибкость: 3;
  фон: желтый
}
.col3 {
  гибкость: 4;
  фон: небесно-голубой
}
.col4 {
  гибкость: 4;
  фон: красный
}
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

tomas657

Ответов: 3

Ответы (3)

Автоматический минимальный размер гибких элементов

Вы столкнулись с настройкой по умолчанию для flexbox.

Гибкий элемент не может быть меньше размера его содержимого по главной оси.

По умолчанию ...

  • минимальная ширина: авто
  • мин-высота: авто

... для гибких элементов в направлении строк и столбцов соответственно.

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

  • минимальная ширина: 0
  • минимальная высота: 0
  • переполнение: скрыто (или любое другое значение, кроме видимое)

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

4.5. Автоматический минимальный размер гибкости Позиции

Чтобы обеспечить более разумный минимальный размер по умолчанию для гибких элементов, это спецификация вводит новое значение auto в качестве начального значения свойства min-width и min-height, определенные в CSS 2.1.

Что касается значения auto ...

На гибком элементе, для которого переполнение равно видимое на главной оси, если указано в свойстве min-size главной оси гибкого элемента, задает автоматический минимальный размер . В противном случае вычисляется 0.

Другими словами:

  • Значения min-width: auto и min-height: auto по умолчанию применяются только тогда, когда overflow равно visible.
  • Если значение overflow не равно visible, значение свойства min-size будет 0.
  • Следовательно, overflow: hidden может быть заменой min-width: 0 и min-height: 0.

и ...


Вы применили min-width: 0, но элемент все еще не сжимается?

Вложенные гибкие контейнеры

Если вы имеете дело с гибкими элементами на нескольких уровнях структуры HTML, может потребоваться переопределить значение по умолчанию min-width: auto / min-height: autoпо предметам на более высоких уровнях.

По сути, гибкий элемент более высокого уровня с min-width: auto может предотвратить сжатие элементов, вложенных ниже, с помощью min-width: 0.

Примеры:


Примечания к рендерингу в браузере

  • Chrome против Firefox / Edge

    По крайней мере, с 2017 года, похоже, что Chrome либо (1) возвращается к min-width: 0 / min-height: 0 по умолчанию, либо (2) автоматическое применение значений по умолчанию 0 в определенных ситуациях на основе загадочного алгоритма. (Это может быть то, что они называют вмешательством .) В результате многие люди видят, что их макет (особенно желаемые полосы прокрутки) работает должным образом в Chrome, но не в Firefox / Edge. . Подробнее об этой проблеме можно прочитать здесь: несоответствие между Firefox и Chrome

  • IE11

    Как указано в спецификации, значение auto для свойств min-width и min-height является «новым». Это означает, что некоторые браузеры могут по-прежнему отображать значение 0 по умолчанию, потому что они реализовали гибкий макет до обновления значения и поскольку 0 является начальным значением для min-width и минимальная высота дюйм CSS 2.1.Одним из таких браузеров является IE11. В других браузерах установлено новое значение auto, как определено в спецификации flexbox.


Пересмотренная демонстрация

.container {
  дисплей: гибкий;
}

.col {
  минимальная высота: 200 пикселей;
  отступ: 30 пикселей;
  word-break: break-word
}

.col1 {
  гибкость: 1;
  фон: оранжевый;
  размер шрифта: 80 пикселей;
  минимальная ширина: 0; /* НОВЫЙ */
}

.col2 {
  гибкость: 3;
  фон: желтый
}

.col3 {
  гибкость: 4;
  фон: небесно-голубой
}

.col4 {
  гибкость: 4;
  фон: красный
}
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

jsFiddle

Я нахожу, что это меня неоднократно кусало за эти годы как за гибкость, так и за сетку, поэтому я собираюсь предложить следующее:

* { min-width: 0; min-height: 0; }

, а затем просто используйте min-width: auto или min-height: auto, если вам нужно такое поведение.

Фактически, добавьте также размер коробки, чтобы сделать всю компоновку более разумной:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Кто-нибудь знает, есть ли странные последствия? Я не встречал ничего за несколько лет использования сочетания вышеперечисленного. На самом деле, я не могу придумать ни одного случая, когда я хотел бы разместить макет от содержимого вовне к гибкости / сетке, а не к гибкости / сетке внутрь к содержимому - и, конечно, если они существуют, они редки. Так что это похоже на плохой дефолт. Но может я чего-то упускаю?

Для этого кода ниже добавление width: 100% решило мою проблему.

.post-cover .inner {
    дисплей: гибкий;
    flex-direction: столбец;
    flex-wrap: обертка;
    justify-content: center;
    выровнять контент: гибкий старт;
    выровнять элементы: гибкий старт;
    слово-разрыв: сломать все;
    z-индекс: 21;
}
.post-cover .article-page {
    отступ: 20 пикселей 0;
    нижнее поле: 40 пикселей;
    размер шрифта: 0,875em;
    высота строки: 2,0;
    переполнение: скрыто;
    переполнение текста: многоточие;
    белое пространство: nowrap;
    ширина: 100%; /* Добавь это */
}

2022 WebDevInsider