‫آموزش فریم ورک Vuetify قسمت اول - نصب و بررسی ساختار grid؛ بخش دوم

<div id="app"><v-app id="inspire"><v-container fluid><v-flex xs4 order-md2><v-card dark tile flat color="red lighten-1"><v-card-text>#1</v-card-text></v-card></v-flex><v-flex xs4 order-md3><v-card dark tile flat color="red lighten-2"><v-card-text>#2</v-card-text></v-card></v-flex><v-flex xs4 order-md1><v-card dark tile flat color="red darken-1"><v-card-text>#3</v-card-text></v-card></v-flex></v-layout><v-layout row wrap><v-flex xs12 sm6 md3 order-md4 order-sm2><v-card dark tile flat color="red darken-2"><v-card-text>#1</v-card-text></v-card></v-flex><v-flex xs12 sm6 md3 order-md3 order-sm1><v-card dark tile flat color="deep-orange lighten-1"><v-card-text>#2</v-card-text></v-card></v-flex><v-flex xs12 sm6 md3 order-md2 order-sm4><v-card dark tile flat color="deep-orange darken-3"><v-card-text>#3</v-card-text></v-card></v-flex><v-flex xs12 sm6 md3 order-md1 order-sm3><v-card dark tile flat color="deep-orange"><v-card-text>#4</v-card-text></v-card></v-flex></v-layout></v-container></v-app></div>

<div id="app"><v-app id="inspire"><v-container fluid grid-list-xl><v-layout row justify-space-between><v-flex xs2><v-card dark color="primary"><v-card-text>one</v-card-text></v-card></v-flex><v-flex xs2><v-card dark color="secondary"><v-card-text>two</v-card-text></v-card></v-flex><v-flex xs2><v-card dark color="accent"><v-card-text>three</v-card-text></v-card></v-flex></v-layout><v-layout row justify-space-around><v-flex xs2><v-card dark color="primary"><v-card-text>one</v-card-text></v-card></v-flex><v-flex xs2><v-card dark color="secondary"><v-card-text>two</v-card-text></v-card></v-flex><v-flex xs2><v-card dark color="accent"><v-card-text>three</v-card-text></v-card></v-flex></v-layout><v-layout row justify-center><v-flex xs2><v-card dark color="primary"><v-card-text>one</v-card-text></v-card></v-flex><v-flex xs2><v-card dark color="secondary"><v-card-text>two</v-card-text></v-card></v-flex><v-flex xs2><v-card dark color="accent"><v-card-text>three</v-card-text></v-card></v-flex></v-layout></v-container></v-app></div>

<div id="app"><v-app id="inspire"><v-container fluid><v-layout row><v-flex grow pa-1><v-card dark color="green darken-3"><v-card-text>#1 Im a Grow Flex</v-card-text></v-card></v-flex><v-flex shrink pa-1><v-card dark color="green darken-1"><v-card-text>#2 Im a Shrink Flex</v-card-text></v-card></v-flex></v-layout><v-layout row><v-flex grow pa-1><v-card dark color="green darken-1"><v-card-text>#1 Im a Grow Flex</v-card-text></v-card></v-flex><v-flex shrink pa-1><v-card dark color="green lighten-1"><v-card-text>#2 Im a Shrink Flex</v-card-text></v-card></v-flex><v-flex grow pa-1><v-card dark color="green darken-4"><v-card-text>#3 Im a Grow Flex</v-card-text></v-card></v-flex></v-layout><v-layout row><v-flex shrink pa-1><v-card dark color="green darken-3"><v-card-text>#1 Im a Shrink Flex</v-card-text></v-card></v-flex><v-flex grow pa-1><v-card dark color="green"><v-card-text>#2 Im a Grow Flex</v-card-text></v-card></v-flex><v-flex shrink pa-1><v-card dark color="green lighten-1"><v-card-text>#3 Im a Shrink Flex</v-card-text></v-card></v-flex></v-layout></v-container></v-app></div>

<div id="app"><v-app id="inspire"><v-container fluid grid-list-md><v-layout row wrap><v-flex d-flex xs12 sm6 md4><v-card color="purple" dark><v-card-title primary>Lorem</v-card-title><v-card-text>{{ lorem }}</v-card-text></v-card></v-flex><v-flex d-flex xs12 sm6 md3><v-layout row wrap><v-flex d-flex><v-card color="indigo" dark><v-card-text>{{ lorem.slice(0, 70) }}</v-card-text></v-card></v-flex><v-flex d-flex><v-layout row wrap><v-flex v-for="n in 2":key="n" d-flex xs12><v-card
                    color="red lighten-2"
                    dark><v-card-text>{{ lorem.slice(0, 40) }}</v-card-text></v-card></v-flex></v-layout></v-flex></v-layout></v-flex><v-flex d-flex xs12 sm6 md2 child-flex><v-card color="green lighten-2" dark><v-card-text>{{ lorem.slice(0, 90) }}</v-card-text></v-card></v-flex><v-flex d-flex xs12 sm6 md3><v-card color="blue lighten-2" dark><v-card-text>{{ lorem.slice(0, 100) }}</v-card-text></v-card></v-flex></v-layout></v-container></v-app></div>