问Flexbox难题
EN

Stack Overflow用户

提问于 2016-07-09 21:57:33

回答 0查看 39关注 0票数 0

当应用媒体查询时，我试图让两个容器并排坐在一起，但似乎无法实现这一目标。这是一个简单的页眉，有三列和一个页脚。我们的目标是将导航和旁路并排放在同一行。虽然我可以减少这两行的大小，但我不能让它包装。非常感谢你提前

body {
  font: 24px Helvetica;
  background: #999999;
}
#main {
  min-height: 100vh;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row;
}
#main > article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 7pt;
  background: #dddd88;
  flex: 3 1 60%;
  order: 2;
}
#main > nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  flex: 1 6 20%;
  order: 1;
}
#main > aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  flex: 1 6 20%;
  order: 3;
}
header,
footer {
  display: block;
  margin: 4px;
  padding: 5px;
  min-height: 100px;
  border: 1px solid #eebb55;
  border-radius: 7pt;
  background: #ffeebb;
}
/* Too narrow to support three columns */

@media all and (max-width: 640px) {
  #main,
  #page {
    flex-direction: column;
  }
  #main > aside,
  #main > nav {
    width: 47%;
    order: 1;
  }
  #main > nav,
  #main > aside,
  header,
  footer {
    min-height: 50px;
    max-height: 50px;
  }
}

<body>
  <header>header</header>
  <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
  </div>
  <footer>footer</footer>
</body>

css

flexbox

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38282580

复制

相似问题

问Flexbox难题
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox难题EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox难题
EN