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?

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

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

Log in to reply