demo 原始链接:https://vux.li/demos/v2/#/component/flexbox
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <divider> {{ $t('Horizontal') }} </divider>\n <flexbox>\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n </flexbox>\n <br>\n <flexbox>\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">3</div></flexbox-item>\n </flexbox>\n <br>\n <flexbox>\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">3</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">4</div></flexbox-item>\n </flexbox>\n <br>\n <flexbox>\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">3</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">4</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">5</div></flexbox-item>\n </flexbox>\n <br>\n <flexbox>\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">3</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">4</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">5</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">6</div></flexbox-item>\n </flexbox>\n <br>\n <divider> {{ $t('Honrizontal with no gutter') }} </divider>\n <flexbox :gutter=\"0\">\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">3</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">4</div></flexbox-item>\n </flexbox>\n <br>\n <divider> {{ $t('Vertical') }} </divider>\n <flexbox orient=\"vertical\">\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n </flexbox>\n <br>\n <divider> {{ $t('Vertical with no gutter') }} </divider>\n <flexbox orient=\"vertical\" :gutter=\"0\">\n <flexbox-item><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2</div></flexbox-item>\n </flexbox>\n <br>\n <divider> {{ $t('Grid support (12 columns)') }} </divider>\n <flexbox>\n <flexbox-item :span=\"4\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">2/3</div></flexbox-item>\n </flexbox>\n <br>\n <flexbox>\n <flexbox-item :span=\"6\"><div class=\"flex-demo\">6/12</div></flexbox-item>\n <flexbox-item :span=\"2\"><div class=\"flex-demo\">2/12</div></flexbox-item>\n <flexbox-item ><div class=\"flex-demo\">rest</div></flexbox-item>\n </flexbox>\n <br>\n <divider> {{ $t('Flexible grid') }} </divider>\n <flexbox>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/6\"><div class=\"flex-demo\">1/6</div></flexbox-item>\n <flexbox-item :span=\"1/8\"><div class=\"flex-demo\">1/8</div></flexbox-item>\n <flexbox-item :span=\"1/8\"><div class=\"flex-demo\">1/8</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">rest</div></flexbox-item>\n </flexbox>\n <br>\n <flexbox :gutter=\"0\">\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/6\"><div class=\"flex-demo\">1/6</div></flexbox-item>\n <flexbox-item :span=\"1/8\"><div class=\"flex-demo\">1/8</div></flexbox-item>\n <flexbox-item :span=\"1/8\"><div class=\"flex-demo\">1/8</div></flexbox-item>\n <flexbox-item><div class=\"flex-demo\">rest</div></flexbox-item>\n </flexbox>\n <br>\n <divider> {{ $t('Flexible grid') }} </divider>\n <flexbox :gutter=\"0\">\n <flexbox-item :span=\"1/3\" :order=\"4\"><div class=\"flex-demo\">1</div></flexbox-item>\n <flexbox-item :span=\"1/6\" :order=\"3\"><div class=\"flex-demo\">2</div></flexbox-item>\n <flexbox-item :span=\"1/8\" :order=\"2\"><div class=\"flex-demo\">3</div></flexbox-item>\n <flexbox-item :span=\"1/8\" :order=\"1\"><div class=\"flex-demo\">4</div></flexbox-item>\n <flexbox-item :order=\"-99\"><div class=\"flex-demo\">5</div></flexbox-item>\n </flexbox>\n <br>\n <divider>flex-wrap</divider>\n <flexbox :gutter=\"0\" wrap=\"wrap\">\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n <flexbox-item :span=\"1/3\"><div class=\"flex-demo\">1/3</div></flexbox-item>\n </flexbox>\n\n </div>\n</template>\n\n\n\n<script>\nimport { Flexbox, FlexboxItem, Divider } from 'vux'\n\nexport default {\n components: {\n Flexbox,\n FlexboxItem,\n Divider\n }\n}\n</script>\n\n<style lang=\"less\">\n@import '~vux/src/styles/1px.less';\n\n.flex-demo {\n text-align: center;\n color: #fff;\n background-color: #20b907;\n border-radius: 4px;\n background-clip: padding-box;\n}\n</style>\n\n
\n