Flexbox侧边栏，具有最大宽度 [英] Flexbox sidebar with max-width
问题描述
是否可以在我的Flexbox布局的侧边栏中设置最大宽度而不会影响内容区域(文章)?现在，更改最大宽度也会影响内容区域.我想要当前的功能，布局具有响应性，而且还要在侧栏上设置最大宽度.
Is it possible to set max-width on the sidebar in my flexbox layout without affecting the content area (article)? Changing the max-width now also affects the content area. I want the current functionality, with the layout being responsive, but also setting a max-width on the sidebar.
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<nav class="nav">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</nav>
<article class="article">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor ....</p>
</article>
</div>
</body>
</html>
CSS:
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
.nav {
background:#eee;
}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {
text-align:left;
-webkit-flex: 1 auto;
flex:1 auto;
-webkit-order:1;
order:1;
}
.article {
-webkit-flex:5 0px;
flex:5 0px;
-webkit-order:2;
order:2;
}
}
推荐答案
现在，您要告诉<nav>和<article>使用此声明使它们尽可能多地增长:
Right now you're telling both your <nav> and your <article> to grow as much as they can with this declaration:
.flex-container > * {
flex: 1 100%;
}
在使用auto而不是100%分配剩余空间之前，应定义<nav>元素的默认大小. auto关键字的意思是看看我的width或height属性".
You should define the default size of your <nav> element before the remaining space is distributed with auto instead of 100%. The auto keyword means "look at my width or height property".
.flex-container > .nav {
flex: 1 1 auto;
max-width: 300px;
}
就在这里，您告诉您<nav>增大和缩小，并且永远不会超过300像素(实际上将为330像素，因为在执行此计算时不会考虑填充)
Right there you're telling your <nav> to grow and shrink and never be wider than 300px (it's gonna be actually 330px because the padding isn't considered when doing this calculations)
因此，为了解决您的问题，我不得不重写一些代码，这是一个有效的小提琴
So in order to solve your problem I had to rewrite some code, here's a working fiddle
这篇关于Flexbox侧边栏，具有最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
