Question

我正在尝试在应用媒体查询时将两个容器并排放置并且似乎无法实现该目标。这是一个简单的标题，包含三列和一个页脚。目标是将Nav和Aside并排放在同一行上。虽然我可以让两排尺寸缩小，但我无法将其包裹起来。非常感谢提前

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>

Answer 1

我添加flex-direction: column;和flex-flow: row wrap;

后，

min-height: auto;不是必须的

您会注意到我还为<article>代码min-height提供了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 { flex-flow: row wrap; min-height: auto; } #main > aside, #main > nav { order: 1; width: 47%; } #main > nav, #main > aside, header, footer { min-height: 50px; } #main > article { min-height: 300px; } }，因此页面看起来还不错。

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

NSSplitViewController

希望这是你正在寻找的东西。

Flexbox难题

1 个答案: