Question

我有一个简单的Flexbox布局用于新网站。它有一个标题，一个导航，一个全屏超出容器的封面和一个内容和一边。

＆＃13;

#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%;
  }
}

＆＃13;

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

＆＃13;

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

为桌面和平板电脑固定的旁边列的宽度为360px，然后当我在768像素的视口下时，该列消失。我尝试用min-width:360px替换宽度百分比，但我打破了布局。

我该如何解决？

Answer 1

你提到#content ＆＃34;正在消失＆＃34; 但是我发现它在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%; } }。

＆＃13;

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

＆＃13;

return false

＆＃13;

注意：稍微改进了CSS。

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

1 个答案: