LG CSS

布局 layout

按需使用

import 'lg-css/dist/layout.css'
or
import 'lg-css/layout.css'

1. 元素

类名样式
.blockdisplay: block;
.inline-blockdisplay: inline-block;
.inlinedisplay: inline;
.hiddendisplay: none;

2. 浮动

类名样式
.flfloat: left;
.frfloat: right;
.fnfloat: none;
.clearfix(清除浮动)

3. 定位

类名样式
.relativeposition: relative;
.absoluteposition: absolute;
.fixedposition: fixed;
.staticposition: static;
.stickyposition: sticky;
类名样式
.absolute-centerposition: absolute; left:50%; top:50%; transform:translate(-50%, -50%);
.fixed-centerposition: fixed; left:50%; top:50%; transform:translate(-50%, -50%);

4. 溢出

类名样式
.ohoverflow: hidden;
.oaoverflow: auto;

5.flex 弹性

类名样式
flexdisplay: flex;
inline-flexdisplay: inline-flex;
flex-columnflex-direction: column;
flex-rowflex-direction: row;
flex-wrapflex-wrap: wrap;
flex-nowrapflex-wrap: nowrap;
flex-shrink-0flex-shrink: 0;
flex-grow-1flex-grow: 1;
水平方向
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
垂直方向
items-startalign-items: flex-start;
items-endalign-items: flex-end;
items-centeralign-items: center;
items-baselinealign-items: baseline;
items-stretchalign-items: stretch;
类名样式
.flex-centerdisplay: flex; justify-content: center; align-items: center;
.flex-between-centerdisplay: flex; justify-content: space-between; align-items: center;
.flex-around-centerdisplay: flex; justify-content: space-around; align-items: center;
.flex-column-centerdisplay: flex; flex-direction: column; justify-content: center; align-items: center;
.flex-column-between-centerdisplay: flex; flex-direction: column; justify-content: space-between; align-items: center;
.flex-column-around-centerdisplay: flex; flex-direction: column; justify-content: space-around; align-items: center;

6. 透明度

类名样式
.opacity-0opacity: 0;
.opacity-1opacity: 1;