Flexbox arragement



  • I am new to quasar and trying to arrange a login page. But I could not achieve correct spacing between items in vertical direction. My code as below, some help?

    <template>
    <q-page class=“flex flex-center”>
    <div class=“column items-center”>
    <div class=“col-12”>
    <img alt=“Gooatin” src="~assets/goat.png">
    </div>
    <div class=“q-display-1”>Sign In</div>
    <div>
    <q-input v-model=“email” type=“email” float-label=“E-Mail” />
    </div>
    <div class=“col-12”>
    <q-input v-model=“password” type=“password” float-label=“Password” />
    </div>
    <div class=“col-4”>
    <q-btn label=“Sign In” />
    </div>
    </div>
    </q-page>
    </template>



  • That’s not much information, but if you look at the docs here, you can see the gutters for controlling flex gutters or here for general CSS spacing classes.



  • thanks i think i figured out.