Эта проблема
Flexbox делает центрирование очень простым.
Просто применяя align-items: center
иjustify-content: center
к гибкому контейнеру, ваши гибкие элементы будут центрированы по вертикали и горизонтали.
Тем не менее, существует проблема с этим методом, когда гибкий элемент больше, чем гибкий контейнер.
Как отмечено в вопросе, когда гибкий элемент переполняет контейнер, верх становится недоступным.
При горизонтальном переполнении левая часть становится недоступной (или правая часть на языках RTL).
Вот пример с контейнером LTR, имеющим justify-content: center
три элемента flex:
Смотрите в нижней части этого ответа для объяснения этого поведения.
Решение № 1
Чтобы решить эту проблему, используйте авто-поля flexbox вместо justify-content
.
С auto
полями переливающийся гибкий элемент может быть центрирован вертикально и горизонтально, не теряя доступа к какой-либо его части.
Итак, вместо этого кода в контейнере flex:
#flex-container {
align-items: center;
justify-content: center;
}
Используйте этот код на элементе flex:
.flex-item {
margin: auto;
}
Пересмотренный Демо
Решение № 2 (еще не реализовано в большинстве браузеров)
Добавьте safe
значение в правило выравнивания ключевых слов, например так:
justify-content: safe center
или
align-self: safe center
Из спецификации CSS Alignment Module :
4.4. Переполнение Выравнивание: safe
и unsafe
ключевые слова и ограничение безопасности прокрутки
Когда [flex item] больше, чем [flex container], он будет переполнен. Некоторые режимы выравнивания, если их соблюдать в этой ситуации, могут привести к потере данных: например, если содержимое боковой панели центрировано, при переполнении они могут отправить часть своих полей за начальный край области просмотра, который нельзя прокрутить до ,
Для управления этой ситуацией можно явно указать режим выравнивания переполнения . Unsafe
Выравнивание учитывает указанный режим выравнивания в ситуациях переполнения, даже если это приводит к потере данных, в то время какsafe
выравнивание изменяет режим выравнивания в ситуациях переполнения, пытаясь избежать потери данных.
Поведение по умолчанию состоит в том, чтобы содержать объект выравнивания в прокручиваемой области, хотя на момент написания этой функции безопасности еще не реализовано.
safe
Если размер [flex item] выходит за пределы [flex container], вместо этого [flex item] выравнивается, как если бы режим выравнивания был [ flex-start
].
unsafe
Независимо от относительных размеров [flex item] и [flex container], заданное значение выравнивания учитывается.
Примечание. Модуль выравнивания ящиков предназначен для использования в разных моделях ящиков, а не только в гибких. Таким образом, в приведенном выше отрывке спецификации термины в скобках на самом деле говорят «объект выравнивания», «контейнер выравнивания» и « start
». Я использовал гибкие термины, чтобы сосредоточиться на этой конкретной проблеме.
Объяснение ограничения прокрутки из MDN:
Особенности Flex
Свойства выравнивания Flexbox выполняют «истинное» центрирование, в отличие от других методов центрирования в CSS. Это означает, что гибкие элементы будут оставаться в центре, даже если они переполняют гибкий контейнер.
Однако иногда это может быть проблематично, если они переполняют верхний край страницы или левый край [...], поскольку вы не можете прокрутить до этой области, даже если там есть контент!
В будущем выпуске свойства выравнивания будут расширены, чтобы также иметь «безопасный» параметр.
На данный момент, если это проблема, вы можете вместо этого использовать поля для достижения центрирования, так как они ответят «безопасным» способом и прекратят центрирование в случае переполнения.
Вместо того, чтобы использовать align-
свойства, просто поместите auto
поля на гибкие элементы, которые вы хотите центрировать.
Вместо justify-
свойств поместите авто поля на внешние края первого и последнего элементов Flex в контейнере Flex.
В auto
полях будут «прогибаются» и предположат , незанятое пространство, центрирования гибких элементов , когда есть пережиток пространства, и переход на нормальное выравнивание , когда нет.
Однако, если вы пытаетесь заменить justify-content
центрирование на основе полей в многострочном флексбоксе, вам, вероятно, не повезло, так как вам нужно поместить поля для первого и последнего элемента Flex в каждой строке. Если вы не можете заранее предсказать, какие элементы окажутся на какой строке, вы не сможете надежно использовать центрирование на основе поля по главной оси для замены justify-content
свойства.
align-items: flex-start
в контейнер flex и оставьтеmargin: auto
для элемента flex.Ну, как сказал бы закон Мерфи, чтение, которое я сделал после публикации этого вопроса, привело к нескольким результатам - не полностью решенным, но, тем не менее, несколько полезным.
Я немного поиграл с min-height перед публикацией, но не знал о внутренних ограничениях размеров, которые являются довольно новыми для спецификации.
http://caniuse.com/#feat=intrinsic-width
Добавление
min-height: min-content
в область flexbox действительно решает проблему в Chrome, а с помощью префиксов поставщиков также исправляются Opera и Safari, хотя Firefox остается нерешенной.Все еще ищу идеи о Firefox и другие потенциальные решения.
источник
margin: auto
остановками неflex-basis
работает для меня, тогда как этот ответ решил обе проблемы.Мне удалось осуществить это всего с 3 контейнерами. Хитрость заключается в том, чтобы отделить контейнер flexbox от контейнера, который управляет прокруткой. Наконец, поместите все в корневой контейнер, чтобы центрировать все это. Вот основные стили для создания эффекта:
CSS:
HTML:
Я создал демо здесь: https://jsfiddle.net/r5jxtgba/14/
источник
flex: 1 1 auto
кscroll-container
. Я делал это по привычке и попал в проблему.Я думаю, что нашел решение. Работает с большим количеством текста и небольшим количеством текста . Вам не нужно указывать ширину чего-либо, и это должно работать в IE8.
источник
Согласно MDN,
safe
теперь значение может быть предоставлено свойствам, подобнымalign-items
иjustify-content
. Это описано следующим образом:Таким образом, это может быть использовано следующим образом.
Тем не менее, неясно, насколько сильно он поддерживает браузер, я не смог найти никаких примеров его использования, и у меня были некоторые проблемы с ним. Упоминание здесь, чтобы привлечь к нему больше внимания.
источник
Мне также удалось сделать это с помощью дополнительного контейнера
HTML
CSS
в jsfiddle> https://jsfiddle.net/Nash171/cpf4weq5/
измените значения .content ширина / высота и посмотрите
источник
2 Контейнер Flex Метод с таблицей нейтрализация испытания IE8-9, гибкие работы в IE10,11. Редактировать: отредактировано для обеспечения вертикального центрирования при минимальном содержании, добавлена устаревшая поддержка.
Как объясняет Майкл, проблема заключается в том, что высота наследуется от размера области просмотра, что приводит к переполнению дочерних элементов. https://stackoverflow.com/a/33455342/3500688
что-то более простое и используйте flex для поддержки макета во всплывающем контейнере (контент):
источник