Question

当我切换左侧边栏时，右侧边栏的大小会发生一些变化。我如何阻止这种情况发生？我正在使用 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>

Answer 1

你非常接近！

现在，边栏“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 使右列大于其基本大小。

如何在不移动 flexbox 的情况下控制过渡？

1 个答案: