在此Flexbox布局中保留抛物线固定宽度
问题描述：
我对新网站有一个简单的flexbox布局。 它有一个标题，一个导航，一个封面，全屏幕以外的容器，一个内容和一旁。在此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 © Booo
</footer>
</div>https://codepen.io/anon/pen/YQzWNe
旁白列固定的台式机和平板电脑，640x360像素的宽度，然后当我去下768像素视口的列消失。 我尝试用min-width:360px代替百分比宽度，但我打破了布局。
我该如何解决？
答
您提到aside“消失”但我发现它在更小的视口上重新流向#content以下。
如果您需要aside是360px并有#content填充剩余空间#content设置flex-grow: 1;并告诉#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 © Booo
</footer>
</div>注：改进了CSS一点。
似乎没有消失在我身边，只是在＃内容下面移动。 – hungerstar
是的，我必须有一边固定在右边，但360 px –
如果你不想它包装（移动到下面的内容），不要使用'flex-flow：wrap'。如果你想固定一个列，给这个列'flex：0 0'。如果你想让它在一定的宽度下消失，在你的媒体部分为这个宽度，给它'display：none'。 –
Adrian