移动设备上的CSS Flexbox会弄乱盒子

我正在努力转换到Flexbox和斗争很多。在SO的帮助下，我能够开始，现在与另一部分斗争。到目前为止，一切都运行得很好，只是当我在iPhone 4或三星3上浏览页面时，它会出现混乱。在桌面上，我可以调整大小，一切都很好，移动，它的工作不是很好。我已经尽可能地简化了，使它在这里更短。徽标工作得很好，它是head_Area和head_Note，在徽标下面，我显然。不希望的。我相信这是一个简单的解决方案，但目前对我来说是令人生畏的。如有任何帮助，不胜感激。

*
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,
table,tr,td,th,p,img
{
   margin: 0;
   padding: 0;
}
img,fieldset
{
   border: none;
}
body
{
   color: #CF6;
   margin: 0 auto;
   font-size: 1.0em;
   max-width: 1280px;
   overflow-y: scroll;
   text-transform: uppercase;
   font-family: "Tahoma", Verdana, sans-serif;
   background: #777 url(../homepics/homeback.jpg) top center;
}
#head_Main
{
   height: 112px;
   margin-bottom: -112px;
   border: 2px solid #444;
   background: #555 url(../homepics/homemenu2.png) 0 0 repeat-x;
}
#head_Wrap
{
   width: 92%;
   display: flex;
   margin: 0 auto;
   max-width: 84em;
   flex-flow: row wrap;
}
#head_Logo
{
   top: 0;
   left: 0;
   width: 77px;
   height: 90px;
   height: 112px;
   background: url(../homepics/homelogo.png) 0 0 no-repeat;
}
#head_Area
{
   flex: 2;
   display: flex;
   min-width: 5em;
   flex-direction: column;
}
#head_Info
{
   color: #0FF;
   height: 45px;
   font: normal 125%/45px Arial, Helvetica, sans-serif;
}
#head_News
{
   margin-top: 0;
   padding: 0 10px;
   font-weight: 600;
}
#head_News li
{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
#head_Note
{
   top: 0;
   width: 77px;
   height: 112px;
}
@media (max-width: 40em)
{
   #head_Main
   {
      margin: 0;
      padding: 0;
      border: 1px solid pink;
   }
   #head_Wrap
   {
      width: 100%;
   }
   #head_Logo
   {
      border: 1px solid yellow;
   }
   #head_Area
   {
      flex: auto;
      display: flex;
      -webkit-flex-direction: column;
      border: 1px solid red;
   }
   .head_Menu
   {
      border: 1px solid blue;
   }
   #head_Info
   {
      border: 1px solid cyan;
   }
   #head_Note
   {
      border: 1px solid orange;
   }
}

<head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
</head>
   <body>
      <!-- header -->
      <header id="head_Main">
         <section id="head_Wrap">
            <article id="head_Logo">
            </article>
            <article id="head_Area">
               <div id="head_Info">
                  <!--  HERE  -->
               </div>
               <div class="head_Menu">
                  <!--  HERE  -->
               </div>
            </article>
            <article id="head_Note">
               <!--  HERE  -->
            </article>
         </section>
      </header>
      <aside>
         <!--  HERE  -->
      </aside>
      <footer>
         <!--  HERE  -->
      </footer>
   </body>

您可以使用flex显示更大的视口。这样，这些列就不会并排显示，而是在标签页和移动设备上一个列在另一个列的下面。这样做可能会有所帮助:

.row {
  display: flex;
}
@media screen and (max-width: 1024px) {
    .row {
        display: initial !important;
    }
}

尝试使用默认属性和供应商属性。我还添加了flex-wrap: nowrap，以防止任何柔性项目包装到另一个项目的侧面。

@media (max-width: 40em)
{.....
  #head_Area
   {
      flex: auto;
      display: flex;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-flex-wrap: nowrap;
      flex-wrap: nowrap;
      border: 1px solid red;
   }

相关内容

最新更新

热门标签：