CODEWITHSUNDEEP
cssvue.jsflexbox
wysiwyg
wysiwyg

Reputation: 57

flexbox with vue js not working

Could someone please tell me what is wrong with this simple code? Just starting to explore flexbox. It works well on a normal html but once I vuejs-ed it, the footer stays on the top of the screen as if there isn't flex css.

Thank you.

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

Upvotes: 3

Views: 8934

Answers (2)

Alan Simpson
Alan Simpson

Reputation: 463

For what it's worth, I did my vue.js 2 template like this:

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

The CSS like this:

#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;
}

Upvotes: 0

Asons
Asons

Reputation: 87191

For that to work, using standard HTML, it should be like this, where the html/body/#app has height: 100%, and you set display: flex; flex-direction: column; to the #app.

This way the flex: 1 0 auto on the wrapper will work properly and make it take the remaining available space.

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>

Upvotes: 4

Related Questions