Элементы Flexbox не переупорядочиваются при изменении размера окна браузера, но делают это в ответном режиме

При изменении размера окна браузера элементы не будут преобразовываться из горизонтального в вертикальное, а просто будут выжимать горизонтально (проверено Chrome, Edge, Firefox) , Но если вы переключились на режим чувствительного режима (например, Firefox CTRL + Shift + M), тогда они будут упорядочивать все красиво, как они предполагали.Элементы Flexbox не переупорядочиваются при изменении размера окна браузера, но делают это в ответном режиме

Здесь в действии https://i.imgur.com/RAPiG1W.mp4

У меня тоже есть эта проблема во время просмотра на iPhone с Safari, но оба режима Адаптивный дизайн Chrome и Firefox показать, что они работают.

Я не следую за тем, что вызывает это.

https://jsfiddle.net/pdsh91fL/

.main-container { 
    display: flex; 
    justify-content: space-around; 
    margin: 15px 0 0 0; 
} 
.main-container .flex-item { 
    display: flex; 
    flex-flow: column; 
    align-items: center; 
    border-bottom: 1px solid #aaaaaa; 
    padding: 0 0 10px 0; 
    flex: 1; 
    margin: 0 15px; 
} 

@media screen and (max-width: 568px) { 
    .main-container { 
    flex-wrap: wrap; 
    } 
}

источник

2017-02-12 user3108268

Вы должны отправить код, который вы пробовали. http://stackoverflow.com/help/how-to-ask –

Мы не можем исправить проблему с кодом без кода – LGSon

https://jsfiddle.net/pdsh91fL/ – user3108268

Посмотрите на медиа-запроса:

@media screen (max-device-width: 568px) { 
    flex-wrap: wrap; 
}

Прежде всего, у вас есть 2 условия: screen и (max-device-width: 568px), но вам не хватает and оператора:

@media screen and (max-device-width: 568px) { 
    flex-wrap: wrap; 
}

Вторая вещь: вы используете max-device-width вместо max-width, поэтому ничего не будет делать в окне браузера компьютера, потому что не является устройством. По этой причине запрос работает только в режиме отклика.

@media screen and (max-width: 568px) { 
    flex-wrap: wrap; 
}

последнее Настораживает: где вы применяя flex-wrap правило? Вы должны определить его.

@media screen and (max-width: 568px) { 
    .main-container { 
     flex-wrap: wrap; 
    } 
}

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

.main-container { 
 
\t display: flex; 
 
\t justify-content: space-around; 
 
\t margin: 15px 0 0 0; 
 
} 
 
.main-container .flex-item { 
 
\t display: flex; 
 
\t flex-flow: column; 
 
\t align-items: center; 
 
\t border-bottom: 1px solid #aaaaaa; 
 
\t padding: 0 0 10px 0; 
 
\t flex: 1; 
 
\t margin: 0 15px; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    .main-container { 
 
    flex-flow: column nowrap; 
 
    } 
 
}

<div class="main-container"> 
 
    <div class="flex-item flex-item-1">Box 1</div> 
 
    <div class="flex-item flex-item-2">Box 2</div> 
 
    <div class="flex-item flex-item-2">Box 2</div> 
 
</div>

источник

2017-02-13 10:06:47

Я обновил его https://jsfiddle.net/ pdsh91fL/2/но без эффекта – user3108268

@ user3108268 Это потому, что вы, вероятно, неправильно понимаете использование flexbox для своей цели. Вы хотите изменить направление, но вы меняете только вариант обертки. Используйте 'flex-flow: column nowrap' вместо' flex-wrap: wrap'. –

решение было гибким: 100%; – user3108268

У вас есть следующие в <head> тега страницы HTML?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

источник

2017-02-12 22:04:06 dargue3

Ответа на этот вопрос FunkyBob на #css Freenode

<FunkyBob> you need to set the flex on the items so they won't shrink, 
and have a basis size they won't shrink below

https://jsfiddle.net/u6gLcw2j/

https://jsfiddle.net/u6gLcw2j/1/

.main-container .flex-item { 
    flex-basis: 100%; 
    }

источник

2017-02-13 11:02:47 user3108268

Элементы Flexbox не переупорядочиваются при изменении размера окна браузера, но делают это в ответном режиме

ответ

Смежные вопросы