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

Posted 2023-02-22

【中文标题】带有vue js的flexbox无法正常工作

【英文标题】：flexbox with vue js not working

【发布时间】：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跨度>

【参考方案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;