Question

我正在努力转换到Flexbox并且经常挣扎。在SO的帮助下，我能够开始并且现在与另一部分斗争。到目前为止，一切都运行良好，除非我在iPhone 4或三星3上查看页面时，它会变得混乱。在桌面上，我可以调整大小，一切都很好，移动，好吧，它没有那么好用。我尽可能地减少了它，以便缩短它。徽标工作正常，head_Area和head_Note放在徽标下面，显然我。不想要。我确信这是一个简单的解决方案，但目前对我来说是令人生畏的。任何帮助都将非常感激。

＆＃13;

*
{
   -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;
   }
}

＆＃13;

<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>

＆＃13;

Answer 1

您只能将flex显示用于较大的视口。这样，列不会并排显示，而是在标签和移动设备上一个在另一个之下。这样做可能会有所帮助：

.row {
  display: flex;
}

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

Answer 2

尝试使用默认属性和供应商属性。我还添加了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;
   }

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

2 个答案: