用 Vue+Ant Design of Vue 写的一个实时演示 Flexible Box 布局的页面

项目说明

技术栈:vue + ant design of vue + express + mongodb。

起初学习前端时,了解到 CSS 中还有 Flexible Box 这么个方便好用的布局系统。为了加深理解,遂写了个简陋的 Flexible Box 演示页面:
用 Vue+Ant Design of Vue 写的一个实时演示 Flexible Box 布局的页面_第1张图片
是不是好看了很多。此外,我还添加了一些新功能,比如:

  • 关于 Flex 属性的气泡提示。

用 Vue+Ant Design of Vue 写的一个实时演示 Flexible Box 布局的页面_第2张图片

  • 点击展示区域内的 Item 会有配置弹框,方便设置。

用 Vue+Ant Design of Vue 写的一个实时演示 Flexible Box 布局的页面_第3张图片

  • 点击配置区域内的 Container 和 Item 的名称,会自动跳转到展示区域中对应的 Container 和 Item。
  • 自动生成 HTML 和 CSS 代码。
  • 用刚学的 express 和 mongodb,做了个点赞功能(路过的记得点个赞哈)。

项目地址

你可能感兴趣的:(vue.js,ant-design,前端)