VaporCSS flex样式写法参考
基础 Flex 布局
| CSS 类 | 样式 | 备注 |
|---|---|---|
fl | display:flex; flex-direction:row; | 水平 Flex 布局 |
fv | display:flex; flex-direction:column; | 垂直 Flex 布局 |
Flex 方向
| CSS 类 | 样式 | 备注 |
|---|---|---|
frr | flex-direction: row-reverse; | 水平反向布局 |
fcr | flex-direction: column-reverse; | 垂直反向布局 |
Flex 收缩
| CSS 类 | 样式 | 备注 |
|---|---|---|
fs | flex-shrink:1; | 允许收缩 |
fs-0 | flex-shrink:0; | 禁止收缩 |
Flex 增长
| CSS 类 | 样式 | 备注 |
|---|---|---|
fg | flex-grow:1; | 允许增长 |
fg-0 | flex-grow:0; | 禁止增长 |
单个项目对齐
| CSS 类 | 样式 | 备注 |
|---|---|---|
fasa | align-self: auto; | 自动对齐 |
fasc | align-self: center; | 居中对齐 |
fass | align-self: flex-start; | 顶部对齐 |
fase | align-self: flex-end; | 底部对齐 |
fasb | align-self: baseline; | 基线对齐 |
fasst | align-self: stretch; | 拉伸对齐 |
项目对齐
| CSS 类 | 样式 | 备注 |
|---|---|---|
faic | align-items: center; | 居中对齐 |
fais | align-items: flex-start; | 顶部对齐 |
faie | align-items: flex-end; | 底部对齐 |
faib | align-items: baseline; | 基线对齐 |
faist | align-items: stretch; | 拉伸对齐 |
内容对齐
| CSS 类 | 样式 | 备注 |
|---|---|---|
facc | align-content: center; | 居中对齐 |
facs | align-content: flex-start; | 顶部对齐 |
face | align-content: flex-end; | 底部对齐 |
facb | align-content: baseline; | 基线对齐 |
facst | align-content: stretch; | 拉伸对齐 |
主轴对齐
| CSS 类 | 样式 | 备注 |
|---|---|---|
fjcs | justify-content: flex-start; | 起始对齐 |
fjce | justify-content: flex-end; | 结束对齐 |
fjcc | justify-content: center; | 居中对齐 |
fjcb | justify-content: space-between; | 两端对齐 |
fjca | justify-content: space-around; | 环绕对齐 |
fjcse | justify-content: space-evenly; | 均匀对齐 |
换行
| CSS 类 | 样式 | 备注 |
|---|---|---|
fww | flex-wrap: wrap; | 允许换行 |
fwn | flex-wrap: nowrap; | 禁止换行 |
fwwr | flex-wrap: wrap-reverse; | 反向换行 |
盒模型
| CSS 类 | 样式 | 备注 |
|---|---|---|
bzn | box-sizing: none; | 默认盒模型 |
bzb | box-sizing: border-box; | 边框盒模型 |
bzx | box-sizing: content-box; | 内容盒模型 |
使用示例
水平布局
vue
<!-- 水平居中对齐 -->
<view class="fl fjcc faic h-100 bg-gray-100">
<view class="w-50 h-50 bg-blue-100"></view>
<view class="w-50 h-50 bg-green-100 ml-10"></view>
<view class="w-50 h-50 bg-red-100 ml-10"></view>
</view>
<!-- 两端对齐 -->
<view class="fl fjcb h-80 bg-gray-100 p-10">
<view class="w-40 h-40 bg-blue-100"></view>
<view class="w-40 h-40 bg-green-100"></view>
<view class="w-40 h-40 bg-red-100"></view>
</view>垂直布局
vue
<!-- 垂直居中对齐 -->
<view class="fv fjcc faic h-200 bg-gray-100">
<view class="w-80 h-40 bg-blue-100"></view>
<view class="w-80 h-40 bg-green-100 mt-10"></view>
<view class="w-80 h-40 bg-red-100 mt-10"></view>
</view>
<!-- 垂直分布 -->
<view class="fv fjcs faist h-200 bg-gray-100 p-10">
<view class="w-80 h-40 bg-blue-100"></view>
<view class="w-80 h-40 bg-green-100"></view>
<view class="w-80 h-40 bg-red-100"></view>
</view>复杂布局
vue
<!-- 混合布局 -->
<view class="fl fjcs faist h-200 bg-gray-100 p-10">
<view class="w-60 h-180 bg-blue-100"></view>
<view class="fv fjcc faic flex-1 ml-10">
<view class="w-full h-50 bg-green-100 mb-10"></view>
<view class="w-full h-50 bg-red-100 mb-10"></view>
<view class="w-full h-50 bg-yellow-100"></view>
</view>
</view>
<!-- 响应式布局 -->
<view class="fl fww fjca p-10">
<view class="w-100 h-100 bg-blue-100 mb-10 mr-10"></view>
<view class="w-100 h-100 bg-green-100 mb-10 mr-10"></view>
<view class="w-100 h-100 bg-red-100 mb-10 mr-10"></view>
<view class="w-100 h-100 bg-yellow-100 mb-10 mr-10"></view>
</view>最佳实践
- 语义化使用：根据布局需求选择合适的 Flex 类
- 组合使用：灵活组合不同的 Flex 类，实现复杂布局
- 响应式设计：结合媒体查询，实现响应式布局
- 性能优化：避免嵌套过深的 Flex 容器
- 浏览器兼容性：注意 Flexbox 在不同浏览器中的兼容性
- 盒模型：合理使用
bzb类，简化布局计算
常见布局模式
居中布局
vue
<!-- 水平垂直居中 -->
<view class="fl fjcc faic h-200 bg-gray-100">
<view class="w-100 h-100 bg-blue-100"></view>
</view>导航栏布局
vue
<!-- 导航栏 -->
<view class="fl fjcs faic h-80 bg-white border-b">
<view class="w-60 h-60 flex-1">
<text class="s-24 sfwb">Logo</text>
</view>
<view class="fl fjce flex-1">
<view class="mr-20"><text class="s-16">首页</text></view>
<view class="mr-20"><text class="s-16">产品</text></view>
<view class="mr-20"><text class="s-16">关于我们</text></view>
<view><text class="s-16">联系我们</text></view>
</view>
</view>卡片布局
vue
<!-- 卡片网格 -->
<view class="fl fww fjca p-10">
<view class="w-150 h-200 bg-white rounded-md shadow-sm p-10 mb-10 mr-10">
<view class="h-100 bg-blue-100 rounded-md mb-10"></view>
<text class="s-16 sfwb">卡片标题</text>
<text class="s-14 c-gray-600 mt-5">卡片描述</text>
</view>
<!-- 更多卡片... -->
</view>表单布局
vue
<!-- 表单行 -->
<view class="fl fjcs faic h-60 mb-10">
<view class="w-120"><text class="s-16">用户名：</text></view>
<view class="flex-1">
<input class="w-full h-40 border rounded-md px-10" placeholder="请输入用户名" />
</view>
</view>通过 VaporCSS Flex 布局系统，您可以轻松实现各种复杂的布局效果，提高开发效率，同时保持代码的清晰和可维护性。