vuetify justify 속성

justify란?

브라우저내  배치 된 컴포넌트들이 공간에서 어떻게 배치 될지 결정하는 속성이다.

들어가는 값들은 아래와같이 있다

 <v-row
    justify="{start|center|end|space-between|space-around|space-evenly}"
    class="bg-purple mt-5"
  >

우선 view를 하나만들고 속성별로 살펴보자

<template>
  <div align="center">
    <h1>
      justify 속성
    </h1>
  </div>
  <!--start center end space-between space-around space-evenly-->
  <v-row
    justify="center"
    class="bg-purple mt-5"
  >
    <v-col
      v-for="count in 12"
      :key="count"
      cols="auto"
    >   
      <v-card
        class="
      pa-3"
        outlined
      >
        컬럼
      </v-card>
    </v-col>
  </v-row>
</template>

justify="start"

왼쪽부터 정렬이 된다.

  <v-row
    justify="start"
    class="bg-purple mt-5"
  >

justify="start"

justify="center"

안봐도 뭐 알겠지 중앙정렬이겠구만

justify="center"

justify="end"

이건 오른쪽 정렬

justify="end"

justify="space-between"

왼쪽먼저 채우고 ,다음 오른쪽 채우고, 그다음에는 균등분배하는군 (머리로는 쉬운데 글로는 표현이 어렵구만)

justify="space-between"

justify="space-between"

justify="space-between"

justify="space-between"

justify="space-around"

이건 가운데 부터 채워나가는구만..

justify="space-around"

justify="space-evenly"

음 이건 오른쪽부터 채워나가는데 start랑 비슷한데 이건 뭘까? 

 

Distribute items evenly Items have equal space around them

justify="space-evenly"

justify="space-evenly"

justify="space-evenly"