#Vue.js 画面設計メモ v-flex

各ページの .vue ファイルのテンプレート構成

ツールバー、コンテンツ、フッタのプロパティを随時見直していく

• 必ず要素の大きさ ( = 最大幅 ) は指定すること
• 指定しなかった場合は、その要素が引き伸ばされる
• min-width: 288px は、iPhone5 に合わせた

<template>

        <v-container

                fluid <- 画面いっぱい

                grid-list-sm <- 要素と要素の間にガター

        >

            <v-layout

                    d-flex <- 横並び

                    wrap <- 適宜折り返し

                    justify-space-around <- 中央揃え

            >

                <v-flex class="mainFlex"

                        xl1 <- 超ワイドスクリーンなら最低 12 個並ぶ

                        lg2 <- ワイドスクリーンなら最低 6 個並ぶ

                        md4 <- 通常スクリーンなら最低 3 個並ぶ

                        sm6 <- タブレットなら最低 2 個並ぶ

                        xs12 <- スマホなら最低 1 個並ぶ

                >

                Page context

                </v-flex>

            </v-layout>

        </v-container>

</template>

<style scoped>

        .mainFlex {

            min-width: 288px; <- 要素の最小幅

        }

</style>