Flexbox arragement

[timescale]

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>

[genyded]

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.

[timescale]

thanks i think i figured out.