Display flex не работает в edge
Я использую flexbox для создания простого и элегантного адаптивного макета на основе flexbox. Вот пример HTML:
Целью flex-basis: 0; flex-grow: 1; max-width: 100%; является моя таблица стилей по умолчанию для всех дочерних элементов Flex, так что каждый дочерний элемент Flex будет расти ровно настолько, насколько это необходимо для содержимого, но при этом заполнять ширину, при необходимости обертывая. Это прекрасно работает.
Дополнительный flex-basis: auto; flex-grow: 0; предназначен для того, чтобы дочерний элемент flex только увеличивался по мере необходимости, как раньше, но не увеличивался больше, чем это, по сути, обертывая гибкий элемент вокруг содержимого.
Я буду использовать , чтобы выделить «карту», которая не растет без необходимости.
Это прекрасно выглядит в Firefox и Chrome. Но он полностью ломается на Microsoft Edge 42.17134.1.0 (EdgeHTML 17.17134). На Edge , который я использую для карты, полностью сжимается, как будто я вытаскивал ее из нормального потока. Контент по-прежнему отображается, полностью за пределами . Вы можете попробовать это здесь:
Я могу обойти эту проблему в Edge, изменив свойства гибкости внутреннего (используя класс стиля concise выше):
Но ручное добавление этого стиля concise не является приемлемым решением. Я не могу вручную изменить свойства дочернего Flex, чтобы он не сломался на Edge. Более того, это изменило бы поведение детей. Если, например, я установил ширину на , я бы хотел, чтобы его дочерние элементы заполнили пространство.
Это известная ошибка Edge с дочерними элементами Flex? Разве внутренний не должен расти по мере необходимости для его содержания?
И что не менее важно, знает ли кто-нибудь обходной путь Общая, который я могу поместить в таблицу стилей, чтобы Edge не сворачивал гибкие элементы в иерархии, без добавления произвольной разметки или стилей в сам HTML?
Я не знаю ответа на ваш вопрос, но не могли бы вы назвать веб-страницу, на которой мы могли бы увидеть эффект?
Я добавил JSFiddle, который позволяет вам увидеть проблему вживую.
Почему вы применяете display: flex на своем внутреннем div ? Также, собираетесь ли вы иметь несколько внутренних div в вашем section ? тег, а также дополнительные элементы section во внешнем div ? Возможно, будет проще, если вы включите изображение того, как вы хотите, чтобы оно появилось.
HTML - это упрощение. Да,
Пишу чат. Когда я писал все DOM-модули в одном HTML, он корректно работал в Chrome, но DOM-модули не работали в Edge. Но потом я переместил все DOM-модули в другой HTML-файл. Теперь это работает в Edge. Но теперь Flexbox работает не во всех браузерах.
Я написал несколько примеров:
Не знаю почему, но в Chrome второй пример работает корректно, хотя в полном проекте у него проблема с Flexbox. Но во втором примере та же проблема в Edge. Смотрите второе изображение.
Первый пример в Edge (DOM-модуль не загружен):
Второй пример в Edge («flex-base: 0» и «flex-grow: 1» не работают):
Правильный результат в Chrome:
4. Ошибка обработки короткой записи значений свойства flex
Раньше спецификация flexbox требовала использовать полную запись:
Если preferred-size равен 0, это должно быть указано, например, \"0px\", чтобы избежать двусмысленности, в другом случае возникнет синтаксическая ошибка.
Это требование уже неактуально, но IE 10-11 все еще воспринимает его всерьез.
2 ответа
Чтобы он заработал, нужно добавить строку «flex-base: 0;» в класс .messages.
Polymer.js тут ни при чем. Это связано с разным поведением Flexbox в разных браузерах.
Файл polymer.html загружается асинхронно .
Вот почему вызов функции Polymer(. ) в Edge завершится ошибкой. Функция еще не определена, потому что скрипт не загружен.
В Chrome это будет работать, потому что пользовательские элементы обрабатываются браузером изначально (и по-разному).
Вам следует дождаться события HTMLImportsLoaded или WebComponentsReady , чтобы убедиться, что импортированные файлы HTML загружены, прежде чем полагаться на их содержимое.
Что касается части flexbox , у меня нет Edge, поэтому я не могу протестировать, но у меня такая же проблема с Firefox, и решением было добавить overflow: hidden в правило CCS для >.
Возможно, это сработает для Microsoft Edge:
Хитрость заключается в том, чтобы определить элемент, которому требуется директива overflow .
вот как это выглядит в Firefox
вот как это выглядит в IE11
в IE 10-11, min-height объявления о контейнерах flex работают для определения размера самих контейнеров, но их дети flex item, похоже, не знают размер своих родителей. Они ведут себя так, как будто высота вообще не установлена.
вот несколько обходных путей:
flex-grow
Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:
По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:
Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1 ? Попробуем сделать flex-grow равным 999:
И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные. Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим блокам:
Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.
flex-grow работает только для главной оси, пока мы не изменим её направление.
flex-shrink
Прямая противоположность flex-grow . Определяет, насколько блоку можно уменьшиться в размере. flex-shrink используется, когда элементы не вмещаются в контейнер. Вы определяете, какие элементы должны уменьшиться в размерах, а какие — нет. По умолчанию значение flex-shrink для каждого блока равно 1. Это значит, что блоки будут сжиматься, когда контейнер будет уменьшаться.
Зададим flex-grow и flex-shrink равными 1:
Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:
flex-shrink основывается на пропорциях. То есть, если у первого блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый блок будет сжиматься в три раза быстрее, чем остальные.
Заменяет flex-grow , flex-shrink и flex-basis . Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis) .
Создадим два блока:
У обоих одинаковый flex-basis . Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding ). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow ) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink ) будет сжиматься в два раза быстрее:
Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex.
Решение
Простое решение этой проблемы заключается в использовании оболочки для Button со свойством display:flex.
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии пишут здесь. Мы же решили объяснить возможности CSS Flexbox с использованием гифок.
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
5. Нарушение пропорций некоторых элементов
Спецификация 2014 года описывает определение размера flex-элемента следующим образом:
Размер элемента, переполнения которого не видно, приравнивается к меньшему из значений: а) min-content; б) width/height, если они указаны.
В случае если вы пытаетесь вписать изображение размерами 200×500 пикселей, а ширина контейнера составляет всего 300 пикселей, изображение будет масштабировано для того, чтобы вписаться в контейнер. В итоге высота изображения получит значение 120 пикселей. Из приведенной выше спецификации неясно, какое значение высоты изображения будет использовано для расчета высоты контейнера: 200 или 120.
Последняя спецификация решила эту проблему в пользу размеров, которые не нарушают пропорций вложенного объекта, но IE 10-11 все еще работает по старой спецификации.
Решение
Есть два способа обойти эту ошибку. Первый не требует дополнительной разметки, но второй более гибкий:
- Вместо того чтобы установить точное значение flex-basis, используйте auto, а затем явно задайте ширину или высоту.
- Применяйте элемент-оболочку, который не использует границы или отступы.
9. Button не становится flex-контейнером
В отличие от input, элементы типа \"button\" или \"submit\" могут содержать дочерние элементы. Это позволяет вставлять что-то кроме текста, не нарушая семантику. Однако Firefox не позволяет использовать этот прием.
Решение
Самым распространенным решением является установка height: 100vh (или 100%). В таком случае, если в контейнер будет помещено слишком много содержимого, появится полоса вертикальной прокрутки. Бывают случаи, когда такое решение не будет работать, тогда используйте определение браузера.
flex-basis
Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox:
flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:
Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.
1. Всегда заполняйте окно просмотра + прокручиваемый контент раздел:
display: flex
На ней размещено 4 div разных размеров, которые находятся внутри серого div . У каждого div есть свойство display: block . Поэтому каждый блок занимает всю ширину строки. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex-контейнером. Делается это так:
Так у блоков появилось свойство flex-контекст, которое в дальнейшем позволит ими управлять гораздо проще, чем с использованием стандартного CSS.
Решение
Эта ошибка проявляется только при короткой записи, так что если вам необходимо использовать Calc (), указывайте каждое свойство индивидуально.
6. Изменилось значение Flex по умолчанию
Когда IE 10 только разрабатывался, значение flex по умолчанию устанавливалось none, что аналогично (0 0 auto). Недавняя спецификация определила стартовым значением (0 1 auto). Это значит, что IE 10 использует схему масштабирования, отличную от других браузеров.
2. Содержимое flex-элемента, для которого установлено align-items:center, выходит за рамки элемента
Ошибка встречается в Internet Explorer 10-11. При использовании align-items:center для контейнера, его содержимое, если оно имеет достаточно большой размер, будет выходить за рамки объекта.
Решение
Если у вас есть необходимость поддерживать IE 10, лучшим решением будет всегда явно задавать flex-shrink или flex для всех ваших гибких элементов.
Немного математики
Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding , и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок ( flex-shrink: 1 ) теряет 70px. Второй блок ( flex-shrink: 2 ) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow .
Если вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.
Решение
Вы можете избежать этой проблемы путем добавления еще одного элемента контейнера с теми же пропорциями. Тогда внутренний элемент перестанет быть гибким и будет масштабироваться, как обычный.
1.Искажение вложенных объектов, размер которых больше размера ячейки
Эта ошибка встречается в Chrome, Opera и Safari. Когда элементы имеют слишком большие размеры, чтобы поместиться внутри контейнера, они должны быть трансформированы, чтобы уменьшить их так, как это определяет свойство flex-shrink. При этом объекты уменьшаются не бесконечно, они не могут получить размеры меньшие, чем их минимальная высота и минимальная ширина.
В соответствии с текущей спецификацией flexbox:
По умолчанию, элементы не будут сжиматься меньше их минимального размера (длина самого длинного слова или фиксированного размера элемента). Чтобы изменить это, установите свойства min-width или min-heigh.
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.
align-self
Позволяет выравнивать элементы по отдельности:
Для двух блоков применим align-self , а для остальных — align-items: center и flex-direction: row .
3. Ошибка с обработкой min-height, указанного для колонок
Для того чтобы элементы могли определять свои размеры и позиционирование, они должны знать о размерах контейнера, в который они помещены. Например, чтобы центрировать объект по вертикали, необходимо знать высоту его родителя. В IE 10-11 объекты ведут себя так, как будто не догадываются о свойствах своих родителей.
Как с CSS Flexbox меняется размер?
Когда увеличивается первый блок, он не становится в два раза больше второго, и когда уменьшается второй, он также не становится в два раза меньше первого. Это происходит из-за того, что flex-grow и flex-shrink отвечают за темп роста и сокращения.
Дополнительно
Решение
В большинстве случаев это может быть исправлено установкой максимальной ширины 100% для контейнера. Если flex-элемент имеет box-sizing:border-box, вы должны убедиться, что указанные размеры учитывают эти свойства. Если вы используете box-sizing, это решение не будет работать, в таком случае вам придется использовать дополнительный контейнер внутри основного.
Решение
Спецификация Flexbox говорит нам, что свойство flex-shrink имеет значение по умолчанию равное 1, но также указывает, что детали не должны сжиматься меньше их минимального размера по умолчанию. Вы можете использовать значение 0 для flex-shrink, что позволит вам избежать этой ошибки. Если ваши элементы рассчитывают свои размеры, исходя из размеров родителей, и не имеют заданных свойств width, height или flex-basis, в остальном они будут вести себя также.
align-items
Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items :
- flex-start
- flex-end
- center
- stretch
- baseline
Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:
Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :
flex-direction
У flex-контейнера есть две оси: главная и перпендикулярная ей.
По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex . А вот flex-direction позволяет вращать главную ось.
Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.
Есть ещё парочка свойств для flex-direction : row-reverse и column-reverse .
justify-content
Отвечает за выравнивание элементов по главной оси:
Justify-content может принимать 5 значений:
- flex-start
- flex-end
- center
- space-between
- space-around
Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.
2. Заполните окно просмотра изначально + обычная прокрутка страницы с большим содержанием:
в IE11 и других браузерах есть множество ошибок Flexbox-см. flexbox on могу ли я использовать - > известные проблемы, где в IE11 перечислены следующие:
- IE 11 требует, чтобы единица была добавлена к третьему аргументу, свойству flex-basis
- в IE10 и IE11, контейнеры с display: flex и flex-direction: column не будет правильно вычислять размеры их сгибаемых детей, если контейнер min-height но нет явного height свойства
- IE 11 не выравнивает элементы по вертикали правильно, когда min-height используется
Также см. Филипа Уолтона Flexbugs список проблем и их решений.
я протестировал полный макет с помощью flexbox он содержит верхний, нижний колонтитул, основной корпус с левой, Центральной и правой панелями, а панели могут содержать пункты меню или нижний колонтитул и заголовки, которые должны прокручиваться. Довольно сложный
IE11 и даже IE EDGE имеют некоторые проблемы с отображением содержимого flex, но его можно преодолеть. Я тестировал его в большинстве браузеров, и он, похоже, работает.
некоторые исправленные у меня применяются, это ошибка высоты IE11, добавление высоты: 100vh и min-height:100% к html / body. это также помогает не устанавливать высоту контейнера в dom. Также сделайте body / html контейнером flex. В противном случае IE11 будет сжимать вид.
исправление для края IE, который переполняет контейнер flex: переполнения:скрытые на основной контейнер. если вы удалите переполнение, IE EDGE будет выталкивать содержимое из окна просмотра вместо того, чтобы содержать его внутри основного контейнера flex.
Вы можете увидеть мое тестирование и пример на моем сайт CodePen страница. Я отметил важные части css с исправлениями, которые я применил, и надеюсь, что кто-то найдет его полезным.
Flexbox стремительно набирает популярность благодаря своей гибкости и адаптивности. Использование этого элемента позволяет легко верстать макеты, которые раньше заставляли попотеть. Основная проблема flexbox в том, что этот довольно новый элемент не гарантирует вам стабильную работу во всех используемых браузерах. Довольно часто встречаются случаи, когда стандартные решения не приносят ожидаемого результата. В этой статье мы рассмотрим некоторые ошибки и пути их решения.
8. Отсутствие поддержки Calc () при сокращенной записи
Internet Explorer 10-11 игнорирует сокращенную запись значений flex, которая использует calc() при описании flex-basis.
Решение
Всегда явно указывайте preferred-size.
Важно: используя значения вроде 1 0 0px, вы все еще можете столкнуться с проблемой, потому что многие минимизаторы CSS будут конвертировать 0px в 0. Чтобы избежать этого, убедитесь, что используете 0% вместо 0px, так как большинство минимизаторов не убирают процентные значения.
Читайте также: