带有vue js的flexbox无法正常工作答案

【问题标题】：flexbox with vue js not working带有vue js的flexbox无法正常工作
【发布时间】：2018-02-11 09:29:01
【问题描述】：

有人能告诉我这个简单的代码有什么问题吗？刚开始探索 flexbox。它在普通的 html 上运行良好，但是一旦我对其进行了 vuejs 编辑，页脚就会停留在屏幕顶部，就好像没有 flex css 一样。

谢谢。

<template>
  <div id="app">
    <div class="wrapper">
      <p>THIS IS MY CONTENT</p>
    </div>
    <footer>
      This is the footer
    </footer>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; 
/* added as per LGSon's suggestion */
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;

}
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}
footer {
  background: #ccc;
  padding: 20px;
}
</style>

【问题讨论】：

如果你也给#app一个高度，height: 100%，它应该可以正常工作
感谢您的快速回复。我补充说，但仍然没有运气。 :(
如果你给#appflex-grow: 1?
还是一样。
还要注意，body 上的display: flex 将仅适用于它的孩子，我假设是#app，如果是这样，#app 需要flex-grow: 1; display: flex; flex-direction: column跨度>

标签： css vue.js flexbox

【解决方案1】：

为此，使用标准 HTML，它应该是这样的，其中 html/body/#app 具有 height: 100%，并且您将 display: flex; flex-direction: column; 设置为 #app。

这样wrapper 上的flex: 1 0 auto 将正常工作并占用剩余的可用空间。

html, body, #app {
  height: 100%;
  margin: 0;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}
footer {
  background: #ccc;
  padding: 20px;
}

  <div id="app">
    <div class="wrapper">
      <p>THIS IS MY CONTENT</p>
    </div>
    <footer>
      This is the footer
    </footer>
  </div>

【讨论】：

这样好多了。我现在正在使用它。谢谢。

【解决方案2】：

为了它的价值，我做了这样的 vue.js 2 模板：

<template>
  <div id="app">
        <div v-for="collection in collections">       
         <a v-bind:href="collection.pageurl">  
           <h1>{{ collection.title }}</h1>
           <h2>{{ collection.author }}</h2>               
        </a>   
        </div>
   <router-view/>
  </div>
</template>

这样的 CSS：

#app {
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
}

#app div {
  box-sizing: border-box;
  width: 300px;
  height: 185px;
  border: solid gray 1px;
  box-shadow: 1px 1px silver;
  margin: 1em;
  text-align: left;
  border-radius: 4px;
}

【讨论】：