当我切换左侧边栏时，右侧边栏的大小会发生一些变化。我该如何阻止这种情况的发生？我正在使用flexbox，并试图找到一种切换左侧边栏的方法。如果有更好的解决方案，效果会更好，我很想学习。
圣杯flex布局是从这里和我喜欢这里的css代码，因为它不需要太多javascript。
由于某些原因，代码片段在stackoverflow中工作不好。我还想学习如何解决这个问题，以便更方便地查看问题。现在，它在完全展开视图中更清晰可见。
* {
margin: 0px;
}
body {
font-size: 24px;
font-family: 'Roboto Slab', Tahoma, Geneva, Verdana, sans-serif;
color: white;
text-align: center;
display: flex;
flex-direction: column;
}
.flex-header {
background-color: lightskyblue;
height: 5vh;
margin: 0px;
}
.flex-main {
display: flex;
flex: 1;
height: 90vh;
}
.flex-nav {
background-color: tomato;
flex: 1 1 5rem;
padding-top: 3rem;
transition: all .2s;
max-width: 1000px;
}
.flex-nav.collapsed {
max-width: 0;
overflow: hidden;
transition: all .2s;
}
.flex-article {
background-color: peachpuff;
flex: 10 10;
padding-top: 3rem;
}
.flex-aside {
background-color: aquamarine;
flex: 1 1 5rem;
padding-top: 3rem;
}
.flex-footer {
background-color: yellowgreen;
height: 5vh;
}
@media all and (max-width: 540px) {
.flex-main {
flex-direction: column;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox</title>
<link rel="stylesheet" href="flex.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>
<body>
<header class="flex-header">
HEADER
<button onclick="document.getElementsByClassName('flex-nav')[0].classList.toggle('collapsed')">
toggle Sidebar
</button>
</header>
<main class="flex-main">
<nav class="flex-nav">
SIDENAV
</nav>
<article class="flex-article">
MAIN CONTENT
</article>
<aside class="flex-aside">
SIDEBAR
</aside>
</main>
<footer class="flex-footer">
FOOTER
</footer>
</body>
</html>你非常接近！
现在；弯曲靠边"；具有CCD_ 1值：CCD_。
该属性是三个独立属性的简写：
flex-grow：控制元素如何展开以适应与其同级元素相关的可用空间flex-shrink：控制元素收缩的方式flex-basis：定义元素的理想起始大小；即，除非能够生长/收缩并且有额外的空间可用，否则尽量保持这种尺寸
因此，你的旁白以1的速率增长和收缩，而中心文章以10的速率增长或收缩。左列也是速率1。因此，左列和右列将分别有效地为可用宽度的1/12，而中心将为宽度的10/12。秘密是将所有的弹性增长相加，当有可用空间时，这就成为分数大小的分母。以下是Kevin Powell对所有Flex属性的深入了解。
要禁用大小更改，只需禁用边上的增长和收缩即可。flex: 0 0 5rem;，不过您可能需要将flex-basis的大小调整为更合适的大小；当前CCD_ 8正在使右列大于其基本大小。