3、justify-content:定义 flex 项目在主轴上的对齐方式,可选值为 flex-start、flex-end、center、space-between、space-around、space-evenly。 4、align-items:定义 flex 项目在交叉轴上的对齐方式,可选值为 flex-start、flex-end、center、baseline。©...
例如常见的写一个 flex 布局给某一个 div 。 xxx 会被翻译成 .flex { display: flex; } .flex-row { flex-direction: row; } .flex-justify-center { justify-content: center; } .flex-items-center { align-items: center; } 上面所说的只是 UnoCS 的最基础的功能。在上面介绍到的优点中,例如纯...
[/^flex-(\w+)-(\w+)$/,([, justify, alignItems]) =>({display:"flex","justify-content": justify,"align-items": alignItems, }), ], ] }) .m-auto{margin:0auto;}.flex-center-center{display:flex;justify-content:center;align-items:center;} shortcuts 配置可以将多个class整合为一个cla...
复制 import{UnocssPluginOptions}from'unocss/vite'import{presetUno,presetAttributify,presetIcons}from'unocss'exportdefault():UnocssPluginOptions=>({presets:[presetAttributify(),presetUno(),presetIcons()],// 使用自带的内部预设, 按需引用rules:[[/^z-(\d+)$/,([,d])=>({'z-index':d})],[...
prefix === align) style += `flex items-${corr?.value} content-${corr?.value}` if (justify) { corr = matches.find(ele => ele.prefix === justify) style += ` justify-${corr?.value}` } return style }, ], ] 1|3在main中引入 // main.ts import { createApp } from 'vue' ...
/**app.wxss**/@import"./unocss.wxss"; .container{display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-sizing:border-box;padding:200rpx0;height:100%; } use vscodeunocssplugin vscodesettings.json // 文件类型"files.associations": {"*.wxml":"html", }, ...
text-align: left; } } 检查器,可以详细的预览我们项目中的所有原子类 我们在启动开发服务器之后,可以直接访问localhost:5173/__unocss就会看到这个画面: 直接就可以看到所有的原子类,具体某个组件中的原子类,打包后的体积等信息。 你的项目太老也想用?安排!
align-items: center; flex-direction: column; } .logo { margin: 200rpx auto 50rpx; width: 200rpx; height: 200rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } 57 changes: 57 additions & 0 deletions 57 uno.config.ts ...
之前我写过一篇文章给我一个你不用tailwindcss的理由!,极力推荐使用 tailwindcss 来提升开发效率和体验,尤其是样式代码的体验会有质的提升。当然样式代码...
unocss解释它为什么这么快的原因，是因为它不用去解析CSS抽象语法树，直接在content里面通过正则表达式从...