html - How to control transition without moving flexbox?

Question

Welcome To Ask or Share your Answers For Others

html - How to control transition without moving flexbox?

asked Feb 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How to control transition without moving flexbox?

When I toggle the left sidebar, the size of the right sidebar changes a little. How do I stop that from happening? I'm using flexbox and I'm trying to find a way to toggle the left sidebar. If there is a better solution that will work better I'd love to learn.

The holy grail flex layout is from here and I like the css code from here as it does not need a lot of javascript.

For some reason the code snippet is not working well in stackoverflow. I'd also like to learn how to fix this so it's more convenient to view the question. Right now it's better visible in full expanded view.

* {
  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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-02-06T00:59:23+0000

You're super close!

Right now, the aside "flex-aside" has a flex value of: 1 1 5rem;.

That property is a shorthand for three separate properties:

flex-grow: controls how an element expands to fit the available space in relation to its siblings
flex-shrink: controls how an element shrinks
flex-basis: defines the ideal starting size of an element; i.e. try to be this size unless growing/shrinking is enabled and extra room is available.

Your aside therefore grows and shrinks at a rate of 1, while the center article grows and shrinks at a rate of 10. The left column is also a rate of 1. So the left and right columns will each effectively be 1/12th of the available width, while the center will be 10/12 of the width. The secret is to add up all the flex grows and that becomes the denominator of the fractional sizes when there is available space. Here's a great in-depth look at all the Flex properties from Kevin Powell.

To disable the sizing change, just disable growing and shrinking on the aside. flex: 0 0 5rem;, though you may need to adjust the flex-basis size to something more appropriate; currently the flex-grow is making the right column bigger than its basis size.

Categories

html - How to control transition without moving flexbox?

html - How to control transition without moving flexbox?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags