Почему мои элементы гибкой коробки «плавают» рядом друг с другом, когда я устанавливаю их элементы для складывания друг на друга (блок)?

У меня есть набор элементов, которые я хочу изменить порядок отображения, когда страница имеет определенную ширину (320px). Они меняют порядок, но я не могу понять, почему элементы «плавающие», а не укладки. («Плавающая» в кавычках, потому что я знаю его на самом деле не плавающий Так что я думаю, что ....)Почему мои элементы гибкой коробки «плавают» рядом друг с другом, когда я устанавливаю их элементы для складывания друг на друга (блок)?

У меня есть следующий HTML:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style type="text/css"> 
     /* Elements */ 
     html, body, div, form, fieldset, legend, label{ 
      margin: 0; 
      padding: 0; 
     } 
     body{ margin:0; padding:0; line-height:1; font-family:Arial, Helvetica, sans-serif; } 
     table{ 
      border-collapse: collapse; 
      border-spacing: 0; 
     } 
     th, td{ 
      text-align: left; 
      vertical-align: top; 
     } 
     ul, li{padding: 0; margin:0;} 
     h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; margin: 0 0 16px; } 
     img { border: 0; } 
     p{ margin: 0 0 16px; } 
     a{} 

     /* Forms */ 
     fieldset{ border:none; } 
     input:focus, select:focus, textarea:focus{ outline: 1px solid #ccc; } 
     textarea{ overflow: auto; } 

     /* Utility */ 
     .error{color: #f00; } 
     .left{float: left; } 
     .right{float: right; } 
     .clear{clear: both; } 
     .hide{display: none; } 


     *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
     nav{ 
      background: #f00; 
     } 
     nav:after { 
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden; 
     } 
     nav ul li{ 
      list-style: none; 
      margin: 0 auto; 
      text-align: center; 
      float: left; 
     } 



     @media screen and (max-width: 320px){ 
      nav{max-width: 100%;} 
      nav ul { 
       width: 100%; 
       display: -webkit-box; 
       display: -moz-box; 
       display: -ms-flexbox; 
       display: -webkit-flex; 
       display: flex; 
      } 
      nav ul li{ 
       -webkit-box-flex: 1; 
       -moz-box-flex: 1; 
       -webkit-flex: 1; 
       -ms-flex: 1; 
       flex: 1; 
       display: block; 
       float: none; 
      } 
      nav .home{ 
       -webkit-box-ordinal-group: 1; 
        -moz-box-ordinal-group: 1;  
        -ms-flex-order: 1;  
        -webkit-order: 1; 
        order: 1; 
      } 
      nav .projects, nav .services{ 
       -webkit-box-ordinal-group: 2; 
        -moz-box-ordinal-group: 2;  
        -ms-flex-order: 2;  
        -webkit-order: 2; 
        order: 2; 
      } 
      nav .about, nav .contact{ 
       -webkit-box-ordinal-group: 3; 
        -moz-box-ordinal-group: 3;  
        -ms-flex-order: 3;  
        -webkit-order: 3; 
        order: 3; 
      } 
     } 
    </style> 
</head> 
<body> 
    <header> 
     <nav> 
      <ul> 
       <li class="projects">Projects</li> 
       <li class="services">Services</li> 
       <li class="home">Home</li> 
       <li class="about">About</li> 
       <li class="contact">Contact</li> 
      </ul> 
     </nav> 
    </header> 

    <section> 

    </section> 

    <footer> 

    </footer> 
</body> 
</html>

и тест fiddle.

Может ли кто-нибудь сказать мне, почему элементы внутри родителя гибкого ящика плавают рядом друг с другом, вместо укладки? Спасибо за помощь!

источник

2013-05-11 Fillip Peyton

Выяснил это. Не присваивал flex-direction свойство column контейнеру гибкой коробки.

Обновлено fiddle.

источник

2013-05-11 04:06:19

Может быть, вы можете добавить:

flex-direction: column;

в медиа-запросе.

Посмотрите здесь: http://jsfiddle.net/ChX8J/4/

источник

2014-04-07 10:47:13 Marconi

Спасибо @Marconi, но я нашел ответ уже. См. Http://stackoverflow.com/questions/16493386/why-does-my-flex-box-elements-float-next-to-each-other-when-ive-set-its-eleme/22910206#answer- 16493642 –

Почему мои элементы гибкой коробки «плавают» рядом друг с другом, когда я устанавливаю их элементы для складывания друг на друга (блок)?

ответ

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