Question

有人可以告诉我这个简单代码有什么问题吗？刚开始探索flexbox。它在正常的html上运行良好，但是一旦我对它进行了调整，页脚就会停留在屏幕顶部，好像没有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>

Answer 1

为了实现这一点，使用标准HTML，它应该是这样的，trait Type trait ConcreteType extends Type { type T } trait TypeConstructor[U] extends Type { type l[X <: U] <: ConcreteType } type Type0 = ConcreteType type Type1 = TypeConstructor[Type0] type Type2 = TypeConstructor[Type1] type Type3 = TypeConstructor[Type2] // type A = Int type A = Type0 {type T = Int} // type B[X] = List[X] type B = Type1 { type l[X <: Type0] = Type0 {type T = List[X#T]} } trait Functor[F[_]] // type C[F[_]] = Functor[F] type C = Type2 { type l[F <: Type1] = Type0 { type T = Functor[ ({ type ll[X] = (F#l[Type0 {type T = X}])#T })#ll ] } } trait Generic[FF[_[_]]] // like shapeless.Generic1, shapeless.IsHCons1, shapeless.IsCCons1 // Generic1[F[_], FR[_[_]]], IsHCons1[L[_], FH[_[_]], FT[_[_]]], IsCCons1[L[_], FH[_[_]], FT[_[_]]] // Generic1[F, Functor], IsHCons1[L, Monad, Monad], IsCCons1[L, Applicative, Applicative] // type D[FF[_[_]]] = Generic[FF] type D = Type3 { type l[FF <: Type2] = Type0 { type T = Generic[ ({ type ll[F[_]] = ( FF#l[Type1 { type l[X <: Type0] = Type0 {type T = F[X#T]} }] )#T })#ll ] } } import shapeless.{::, HNil} type lst = A :: B :: C :: D :: HNil / html / body有#app，并设置{{1转到height: 100%。

这样display: flex; flex-direction: column;上的#app就能正常工作，并占用剩余的可用空间。

flex: 1 0 auto

wrapper

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

flexbox与vue js无法正常工作

2 个答案: