Ящик сгибается, бросая коробки рядом друг с другом, i.s.o. кладка

Question

В настоящее время я работаю над проектом, и я застрял в использовании гибкого

http://dennisprins.nl/mvdw/index.php

Все выглядит хорошо, но когда вы сделаете свой видовой экран меньше (около 1400px) вы видите, что обвалы макетов колонков , Как я могу предотвратить их свертывание. В моем css нет медиа-запросов, поэтому это связано не с запросами на медиа.

Заполнитель со всеми коробками:

#overview { 

    -webkit-box-flex: 4; 
    -moz-box-flex: 4; 
    -webkit-flex: 4; 
    -ms-flex: 4; 
    flex: 4; 


    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-direction: column; 
    -moz-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 

    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    -moz-flex-wrap: wrap; 
    flex-wrap: wrap; 
    flex-flow: column wrap; 
    height: 100vw; 
} 

Индивид коробка:

.video_grid { 
    background: rgb(255,255,255); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef',GradientType=0); /* IE6-9 */ 
    margin: 0.5em 0em; 
    width: 20em; 


} 

Answer 1

Вы смешивая старые свойства Flexbox, которые устарели с новыми свойствами Flexbox. Старые свойства с префиксом по-прежнему распознаются соответствующими браузерами, и это вызывает неожиданное поведение.

-webkit-box-flex: 4; и подобные -box-* свойства должны быть удален.

• Here is a quick guide to recognising the old flexbox properties:

  Если вы смотрите на блоге (или любой другой) о Flexbox и вы см display: box; или свойство, которое box-{*}, вы смотрите на старой версии 2009 Flexbox.

  Если вы смотрите на блоге (или любой другой) о Flexbox и вы см display: flexbox; или функцию flex(), вы смотрите на неудобном Tweener фазы в 2011 году

  Если вы смотрите на сообщение блога (или что-то еще) о Flexbox и вас см. display: flex; и flex-{*} свойства, вы смотрите на текущую (начиная с этой записи) спецификацию .

• Use this as a guide to all the properties you should be using.

• Here is the browser compatibility for the current Flexbox recommendation. Для браузера Safari требуется только префикс -webkit-.

Я заметил, что вы внесли некоторые изменения на свой сайт, этот пример основан на фрагменте в вашем вопросе.

Используйте это:

#overview { 
    -webkit-flex: 4; 
    flex: 4; 

    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: column wrap; 
    flex-flow: column wrap; 
    height: 100vw; 
}