在此 flexbox 布局中保持侧列固定宽度

Question

我有一个用于新网站的简单 flexbox 布局。 它有一个标题、一个导航、一个全屏显示容器外的封面以及一个内容和一个旁白。

#container {
  margin: 0 auto;
  max-width: 1080px;
}

#columns {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
}

header {
  padding: 3%;
  background-color: #6495ED;
}

#cover {
  max-width: 1350px;
  margin: 0 -135px;
  padding: 3%;
  background-color: #6495ED;
}

header #title {
  font-size: 50px;
  color: #fff;
}

nav {
  width: 97%;
  background-color: #6495ED;
  padding: 0 1.5% 0 1.5%;
}

nav ul li {
  display: inline-block;
  padding: 15px 1.5% 15px 1.5%;
}

nav ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2em;
}

nav ul li a:hover {
  color: #000000;
  text-decoration: none;
}


/* Content After
--------------------------------------------- */

#columns>#content {
  padding: 3%;
  width: 64%;
}

#columns>aside {
  padding: 3%;
  min-width: 24%;
  background-color: #eee;
}

footer {
  width: 94%;
  padding: 3%;
  background-color: #6495ED;
  border-top: 5px solid black;
  color: #fff;
  text-align: center;
}

@media all and (max-width: 1350px) {
  #cover {
    max-width: 1080px;
    margin: 0;
  }
}

@media all and (max-width: 768px) {
  header {
    text-align: center;
  }
  nav {
    text-align: center;
  }
  #columns {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
  }
  #columns>#content {
    width: 94%;
    padding: 3%;
  }
  #columns>#sidebar {
    width: 94%;
    padding: 3%;
    border-top: 3px solid #E64A19;
  }
}

@media all and (max-width: 330px) {
  nav ul li {
    display: block;
    width: 94%;
  }
}

<div id="container">
  <!-- header -->
  <header id="header">
    <h1 id="title">Two Column</h1>
  </header>
  <!-- Navigation -->
  <nav id="menu" class="clearfix">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav>
  <section id="cover">

  </section>
  <section id="columns">
    <!-- Main Content area -->
    <section id="content">
      <!-- your content here -->
    </section>

    <!-- Sidebar -->
    <aside id="sidebar">
      <!-- your content here -->
    </aside>
  </section>
  <footer id="footer" class="clearfix">
    Copyright &copy Booo
  </footer>
</div>

https://codepen.io/anon/pen/YQzWNe

固定为台式机和平板电脑的侧列宽度为 360 像素，然后当我进入视口的 768 像素以下时，该列消失。 我尝试用min-width:360px 替换宽度百分比，但我破坏了布局。

我该如何解决？

Answer 1

您提到了 aside “消失”，但我看到它在较小的视口上重新流动到 #content 下方。

如果您需要aside 为360px 并让#content 填充剩余空间集flex-grow: 1; 为#content 并告诉#sidebar 为360px。

#container {
  margin: 0 auto;
  max-width: 1080px;
}

#columns {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}

#header,
#cover,
#footer  {
  padding: 3%;
  background-color: #6495ED;
}

#cover {
  max-width: 1350px;
  margin: 0 -135px;
}

#title {
  font-size: 50px;
  color: #fff;
}

#menu {
  background-color: #6495ED;
  padding: 0 1.5%;
}

#menu ul {
  margin: 1rem;
  padding: 0;
}

#menu li {
  display: inline-block;
  padding: 15px 1.5%;
}

#menu a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
}

#menu a:hover {
  color: #000;
}


/* Content After
--------------------------------------------- */
#content,
#sidebar {
  padding: 3%;
}

#content {
  flex-grow: 1;
}

#sidebar {
  min-width: 360px;
  background-color: #eee;
}

#footer {
  border-top: 5px solid black;
  color: #fff;
  text-align: center;
}

@media all and (max-width: 1350px) {
  #cover {
    max-width: 1080px;
    margin: 0;
  }
}

@media all and (max-width: 768px) {
  #header,
  #menu {
    text-align: center;
  }
  #columns {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  #sidebar {
    border-top: 3px solid #E64A19;
  }
}

@media all and (max-width: 330px) {
  #menu li {
    display: block;
    padding: 0 3%;
  }
}

<div id="container">
  <!-- header -->
  <header id="header">
    <h1 id="title">Two Column</h1>
  </header>
  <!-- Navigation -->
  <nav id="menu" class="clearfix">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav>
  <section id="cover">

  </section>
  <section id="columns">
    <!-- Main Content area -->
    <section id="content">
      <!-- your content here -->
    </section>

    <!-- Sidebar -->
    <aside id="sidebar">
      <!-- your content here -->
    </aside>
  </section>
  <footer id="footer" class="clearfix">
    Copyright &copy Booo
  </footer>
</div>

注意：稍微改进了 CSS。