fosung-css

flex布局

// flex布局
.fs-flex {
	display: flex;
  flex-direction: row;
  align-items: center;
}
// 换行
.fs-flex-wrap {
  flex-wrap: wrap;
}
// 不换行
.fs-flex-nowrap {
	flex-wrap: nowrap;
}
// 垂直居中
.fs-col-center {
	align-items: center;
}
// 与交叉轴的起点对齐, 即起点
.fs-col-top {
	align-items: flex-start;
}

// 纵向终点对齐
.fs-col-bottom {
  align-items: flex-end;
}
// 横向居中
.fs-row-center {
  justify-content: center;
}
// 横向起点对齐
.fs-row-left {
  justify-content: flex-start;
}
// 与交叉轴的终点对齐，即终点
.fs-row-right {
  justify-content: flex-end;
}
// 两端对齐
.fs-row-between {
  justify-content: space-between;
}
// 每根轴线两侧的间隔都相等
.fs-row-around {
  justify-content: space-around;
}

// 纵向flex
.fs-flex-col {
  display: flex;
  flex-direction: column;
}

// flex等分
.fs-flex-0 
.fs-flex-1
.fs-flex-2
.fs-flex-3
.fs-flex-12

// 横向两端对齐内容居中， 不换行
<div>
	<div class="fs-flex fs-row-between fs-row-center fs-flex-wrap">
		<div  class="fs-flex-1">1</div>
		<div  class="fs-flex-2">2</div>
	</div>
</div>

// 纵向两端对齐内容居中， 不换行
<div>
	<div class="fs-flex-col fs-flex-wrap">
		<div class="fs-flex-1">1</div>
		<div class="fs-flex-6">2</div>
	</div>
</div>

边框样式

// 边框 1px
<div class="fs-border"></div>
// 上边框 1px
<div class="fs-border-top"></div>
// 下边框 1px
<div class="fs-border-bottom"></div>
// 左边框 1px
<div class="fs-border-left"></div>
// 右边框 1px
<div class="fs-border-right"></div>

清除浮动

<div class="fs-clearfix"></div>

字体大小

// 12px
<div class="fs-font-xs"></div>
// 14px
<div class="fs-font-sm"></div>
// 16px
<div class="fs-font-md"></div>
// 18px
<div class="fs-font-lg"></div>
// 20px
<div class="fs-font-xl"></div>

// 支持 从12px 到 36px
<div class="fs-font-12"></div>
<div class="fs-font-36"></div>

超出隐藏

// 超出一行 省略号
<div class="fs-line-1"></div>
// 超出二行 省略号
<div class="fs-line-2"></div>
// 超出三行 省略号
<div class="fs-line-3"></div>
// 超出四行 省略号
<div class="fs-line-4"></div>
// 超出五行 省略号
<div class="fs-line-5"></div>

边距

// 支持 0-80px的padding 和 margin 不包含单数，但是包含可以被5整除的数值
// .fs-m-10 .fs-margin-10 效果相同
// .fs-m-l-10 .fs-margin-left-10 效果相同
// .fs-m-r-8 .fs-margin-right-8 效果相同
// .fs-m-b-12 .fs-margin-bottom-12 效果相同
// .fs-m-t-16 .fs-margin-top-16 效果相同

// .fs-p-10 .fs-p-10 效果相同
// .fs-p-l-10 .fs-p-l-10 效果相同
// .fs-p-r-8 .fs-p-r-8 效果相同
// .fs-p-b-12 .fs-p-b-12 效果相同
// .fs-p-t-16 .fs-p-t-16 效果相同
<div class="fs-m-10"></div>
<div class="fs-p-10"></div>

定位

// 相对定位
<div class="fs-relative"></div>
// 绝对定位
<div class="fs-absolute"></div>

隐藏滚动条

<div class="fs-scrollbar"></div>

文本显示

文本显示

// 居左显示
<div class="fs-text-left"></div>
// 居中显示
<div class="fs-text-center"></div>
// 居右显示
<div class="fs-text-right"></div>

图标居中

// icon图表和文字垂直居中
<div class="fs-icon-wrap">
	<span>这个是icon图标</span>
	<span></span>
</div>

点击无效

<div class="fs-click-invalid"></div>

禁止选中

<div class="fs-no-select"></div>

集中样式

.fs-primary-color {
    color:#c50405
}
.fs-primary-color-50 {
    color:#c50405;
    opacity:.5
}
.fs-primary-color-20 {
    color:#c50405;
    opacity:.2
}
.fs-primary-color-10 {
    color:#c50405;
    opacity:.1
}
.fs-primary-color-1 {
    color:#e50202
}
.fs-primary-color-1-50 {
    color:#e50202;
    opacity:.5
}
.fs-primary-color-1-20 {
    color:#e50202;
    opacity:.2
}
.fs-primary-color-1-10 {
    color:#e50202;
    opacity:.1
}
.fs-primary-color-2 {
    color:#800101
}
.fs-primary-color-2-50 {
    color:#800101;
    opacity:.5
}
.fs-primary-color-2-20 {
    color:#800101;
    opacity:.2
}
.fs-primary-color-2-10 {
    color:#800101;
    opacity:.1
}
.fs-primary-color-3 {
    color:#f08116
}
.fs-primary-color-3-50 {
    color:#f08116;
    opacity:.5
}
.fs-primary-color-3-20 {
    color:#f08116;
    opacity:.2
}
.fs-primary-color-3-10 {
    color:#f08116;
    opacity:.1
}
.fs-system-primary {
    color:#1776fa
}
.fs-system-success {
    color:#50cd65
}
.fs-system-warning {
    color:#f7c018
}
.fs-system-danger {
    color:#ff6b6b
}
.fs-text {
    color:#1a1919
}
.fs-text-2 {
    color:#606266
}
.fs-text-3 {
    color:#909399
}
.fs-text-4 {
    color:#d7d9de
}
.fs-text-disable {
    color:#dfe1e6
}
.fs-bg {
    background-color:#fff
}
.fs-bg-grey {
    background-color:#f9f9f9
}
.fs-bg-line-deep {
    background-color:#f0f2f7
}
.fs-bg-line-shallow {
    background-color:#ecedf2
}
.fs-border-color, .fs-border-deep {
    border-color:#cfd4db
}
.fs-border-deep-level {
    border-color:#e4e7ed
}
.fs-border-shallow {
    border-color:#ebeef5
}
.fs-border-shallow-level {
    border-color:#f2f6fc
}
.fs-line-40 {
    line-height:40px
}
.fs-line-32 {
    line-height:32px
}