简单好用的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即可