wRC

简单好用的HTML通用Flex布局

说明

• "w" 为前缀，用于区分用户的css class
• "R"-row 代表横向
• "C"-column 代表纵向
• "_" 分割符
• "H"-horizontal 代表水平方向
• "V"-vertical 代表垂直方向
• "S"-start 代表头部
• "C"-center 代表中间
• "E"-end 代表尾部
• "B"-block 代表块(不加则默认宽度为100%)

默认width: 100%，当不需要100%宽度时，可以添加"B"取消宽度属性

用法举例

"w"为前缀，必需添加。然后根据需求选择"R"或者"C"，之后用"_"分割后续布局要求。

例如： wR_HC 横向布局-水平居中

<div class="wR_HC">
    <span>水平居中</span>
</div>

---

默认宽度为100%，若不需要则在末尾添加"B"

例如： wR_HCB 横向布局-水平居中-块

<div class="wR_HCB">
    <span>水平居中-宽度以子元素大小为准</span>
</div>

---

wR_HCVC 横向布局-水平居中-垂直居中

<div class="wR_HCVC">
    <span>水平居中-垂直居中</span>
</div>

---

使用"C"标识代表纵向布局

wC_HC 纵向布局-水平居中

<div class="wC_HC">
    <span>水平居中</span>
</div>

代码示例

查看index.html即可