@meizhou/atomcss

Appearance

display ​

命名规律：使用属性值

class名
样式值
flex
display: flex;
grid
display: grid;
none
display: none;
block
display: block;
inline-block
display: inline-block;
inline
display: inline;
inline-flex
display: inline-flex;
table
display: table;
inline-table
display: inline-table;
table-caption
display: table-caption;
table-cell
display: table-cell;
table-column
display: table-column;
table-column-group
display: table-column-group;
table-footer-group
display: table-footer-group;
table-header-group
display: table-header-group;
table-row-group
display: table-row-group;
table-row
display: table-row;
flow-root
display: flow-root;
inline-grid
display: inline-grid;
contents
display: contents;
list-item
display: list-item;

使用示例 ​

flex ​

A
atomCss
为uniapp而生
vue
<div class=" flex ai-c jc-c border p-20 br-10 bg-#f6f6f7">
  <div class="flex ai-c ">
    <div class="c-white bg-#2b9939 br-50% wh-46 mr-10 flex jc-c ai-c fs-40">A</div>
    <div>
      <div>atomCss</div>
      <div class="fs-12 c-#9">为uniapp而生</div>
    </div>
  </div>
</div>
<div class=" flex ai-c jc-c border p-20 br-10 bg-#f6f6f7">
  <div class="flex ai-c ">
    <div class="c-white bg-#2b9939 br-50% wh-46 mr-10 flex jc-c ai-c fs-40">A</div>
    <div>
      <div>atomCss</div>
      <div class="fs-12 c-#9">为uniapp而生</div>
    </div>
  </div>
</div>