ㅁ Vue t ify
vuetifyjs.com/en/components/grids/
Grid system
Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application.
vuetifyjs.com
ㅁ Vue t ify - Grid system
- FlexBox를 기반
developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주
developer.mozilla.org
- 12Colmn Grid system
- 5가지의 BreakPoints를 제공
ㅁ Vue t ify - Grid system 4가지 API 요소
ㅇ v-container : 웹 페이지 정중앙으로 배치 할때 사용함v-container사이트 콘텐츠를 중앙 및 수평으로 채우는 기능(반응형)
페이지 가로 최대로 채울때 fluid
<v-container fluid></v-container>
ㅇ v-row : v-col의 직계 하위 여야하는 콘텐츠 보유자입니다 v-row. 이것은 v-flex1.x 의 2.x 대체품입니다 .
ㅇ v-col : v-row의 래퍼 구성 요소입니다 v-col. 내부 열의 레이아웃과 흐름을 제어하기 위해 플렉스 속성
ㅇ v-spacer : v-spacer부모 자식 구성 요소 사이에 나머지 너비를 배포하는 데 사용되는 기본적이지만 다양한 간격 구성 요소 v-spacer하위 구성 요소 앞이나 뒤에 하나 를 배치 하면 구성 요소가 컨테이너의 오른쪽과 왼쪽으로 밀립니다. v-spacer여러 구성 요소 사이에 하나 이상의 가 사용되면 나머지 너비는 각 스페이서 사이에 균등하게 분산됩니다.
출처 : 짐코딩
www.youtube.com/watch?v=V30z8k8kTfE
www.youtube.com/watch?v=InuKrcuByWI
댓글