当我切换左侧边栏时,右侧边栏的大小会发生一些变化。我如何阻止这种情况发生?我正在使用 flexbox,我正在尝试找到一种切换左侧边栏的方法。如果有更好的解决方案,我很乐意学习。
圣杯 flex 布局来自 here 和 我喜欢 here 中的 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>
答案 0 :(得分:2)
你非常接近!
现在,边栏“flex-aside”的 flex
值为:1 1 5rem;
。
该属性是三个独立属性的简写:
flex-grow
:控制元素如何扩展以适应与其兄弟元素相关的可用空间flex-shrink
:控制元素的缩小方式flex-basis
:定义一个元素的理想起始尺寸;即,除非启用了增长/收缩并且有额外的空间可用,否则尽量采用这种尺寸。因此,您的旁边以 1 的速率增长和收缩,而中心文章以 10 的速率增长和收缩。左列也是 1 的速率。因此,左列和右列将分别有效地为 1/可用宽度的 12th,而中心将是宽度的 10/12。秘诀是将所有的 flex 加起来,当有可用空间时,它就会成为分数大小的分母。这是a great in-depth look at all the Flex properties from Kevin Powell。
要禁用大小更改,只需在旁边禁用增长和收缩。 flex: 0 0 5rem;
,但您可能需要将 flex-basis
大小调整为更合适的值;目前,flex-grow
使右列大于其基本大小。