Question

我可能很难理解CSS网格和flex如何一起工作。我有一个横跨屏幕的顶部导航栏，一个主要的内容区域，侧边栏和页脚，它们是使用CSS网格制作的。

顶部导航栏显示为flex，其中div项徽标和菜单（flex方向：列）垂直放置。在移动视图中，我想使其水平放置div项目徽标和菜单（弹性方向：列）。

问题出在这里：

HTML：

  <header id = "main-header">
     <div class="container nav-flex">
        <div class="site-logo">
          <div>
            beautiful blog
          </div>
        </div>
        <div class="main-header-nav">
          <div>hello</div>
            <label for="toggle">&#9776;</label>
            <div class="menu-nav">              
            </div>
        </div>
     </div>
  </header>

CSS：

#main-header { 
  grid-area: main-header; 
  text-align: center; 
}

.main-area {
  grid-area: ct-main;
}

.side-area {
  grid-area: ct-side;
}

.footer-area {
  grid-area: ft;
}

.nav-flex {
  background: #eee;
  display: flex; 
  flex-direction: row; 
}

.main-header-nav {
  display: flex;
  flex-direction: row; 
  align-items: center; /*vertically centers items*/
  justify-content: center; /*centers items*/

}

.site-logo { 
  flex: 3; 
  background: #eee; 
}

.main-header-nav { 
  flex: 1;
  background: #ddd; 
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "main-header main-header"
    "ct-main ct-side"
    "ft ft";
  max-width: 960px;
  margin: 0 auto;
}


@media only screen and (max-width:500px) { 
  .nav-flex {
    flex-direction: row; 
   }

}

我之所以放.container是因为＃main-header背景应该覆盖整个屏幕，而容器中的所有内容均为960像素。

问题：发生的事情是，顶部导航菜单只会水平放置，徽标div和菜单div分别占据我的CSS网格中的2fr和1fr间距-而不是跨越＃main-header父div，允许我根据需要放置flex div。

当我在.container中删除CSS网格代码时，它工作正常。

我对CSS网格和Flexbox相对较新，但是我的理解是CSS网格是一种以2d方式设置布局的方法，而Flex是以其容器内的某种方式安排内容。

我得到的东西（1.最大化屏幕，2.移动屏幕视图）： maximized view

mobile screen view

我要实现的目标（3.最大化屏幕，4.移动屏幕视图）：maximized view mobile screen view

对于这个问题措辞令人困惑，我深表歉意。现在是凌晨2点，我无法解决。 Just in case I'm being really confusing

非常感谢您！

Answer 1

您希望徽标和菜单在移动视图中水平显示，而在桌面上垂直显示。

使用flexbox时，无论屏幕大小是多少，您都可以定义项目流动的一个方向。一旦项目开始在较小的屏幕上包装（柔性包装），就会出现不同的结果。如果没有足够的空间容纳一行或一列，它们会包裹起来。

在您的示例中，您的项目在所有可能的屏幕上都适合div，因此不必包装。如果希望它们包裹在较小的屏幕上，则必须为商品和容器设置高度，并按如下所示修改CSS：

.nav-flex {
  background: #eee;
  display: flex; 
  flex-direction: column;
  flex-wrap: wrap;
}

然后，尝试调整容器和物品的高度。看看这个例子： https://jsfiddle.net/fte69gd0/ 通过降低屏幕高度，子元素可以连续对齐，因为它们不再适合容器。在示例中，我使用vh和px作为高度测量值，但是可以肯定有不同的选择。

尽管我可能根本不会使用flexbox并看看the css media rule。

Flex容器中的元素根据CSS网格布局进行“格式化”

1 个答案: