Flex-wrap не работает при переходе на мобильный
Простая настройка гибкого переноса работает правильно, когда я изменяю размер окна (более узкое окно приводит к переносу, как и ожидалось). Однако, когда я переключаюсь на мобильную эмуляцию (в Chrome 70.0), несмотря на изменение размера, два поля отображаются либо бок о бок, либо сложены (упакованы), в зависимости от их конфигурации до того, как я перешел на мобильную версию. Другими словами, если окно было широким с самого начала, тогда блоки будут нет переноситься и останутся бок о бок.
Загружаясь непосредственно в режиме мобильной эмуляции, я получаю бок о бок бок о бок, несмотря на узкую ширину эмулируемой мобильной страницы.
Не уверен, что мне здесь не хватает. Код ниже:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<style type = "text/css">
div.flexrow { display: flex; flex-wrap: wrap; padding-left: 20px }
div.header { border: 1px solid black; min-width: 320px; flex-grow: 1 }
div.content { border: 1px solid black; min-width: 320px; flex-grow: 1 }
</style>
</head>
<body>
<div class = "flexrow">
<div class = "header">
<h3>Section H3 header</h3>
<p>text</p>
</div>
<div class = "content">
<ol>
<li>List item 1. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</li>
<li>List item two. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</li>
<li>List item the third. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</li>
</ol>
</div>
</div>
<body>
</html>
Я использую либо Pixel 2XL, либо iPhone X, либо любой из нескольких других эмулируемых мобильных вариантов в Chrome.
не могли бы вы добавить ссылку на код, чтобы я мог работать здесь? Вы можете написать несколько медиа-запросов, например, flex direction: column; для мобильного.
Сумит Кумар, использовавший гибкую основу («заливку» или «содержимое») в блоке «flexrow», при удалении настройки гибкого роста не помог.
пожалуйста, попробуйте использовать медиа-запрос для достижения результатов.
Ответы 1
Очевидно, Chrome для мобильных устройств слишком умен для управления размером шрифтов на мобильных устройствах. Решение: отключите эту функцию, добавив
<meta name = "viewport" content = "width=device-width">
в главном блоке вашего HTML.
Используйте гибкую основу для 100% ширины элементов, а не для увеличения гибкости.