# c-layout

**Repository Path**: dingjiawen/c-layout

## Basic Information

- **Project Name**: c-layout
- **Description**: 前端布局框架（flex布局），以及一些常用的css样式
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2023-01-31
- **Last Updated**: 2023-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用方式
> 引入c-layout-mini.css文件进行使用
# 目录结构
>c-layout-combination.css --组合布局css源码（将一些复杂的样式封装为一个class）<br>
c-layout-mini.css --布局框架，将此css文件引入到项目中进行使用便可<br>
c-layout.css  --基础布局框架css源码，包含基础布局，常用css样式等<br>
c-style.css  --常用style样式以及自适应字体



# 通用布局(c-layout)

## 纵向布局 c-column

```css
.c-column {
  display: flex;
  flex-direction: column;
}
```
## 横向布局 c-row

```css
.c-row {
  display: flex;
  flex-direction: row;
}
```
## 横向布局 元素靠左 c-row-left

```css
.c-row-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
```
## 横向布局 元素靠右 c-row-right

```css
.c-row-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
```
## 横向布局 元素居中 c-row-center

```css
.c-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
```
## 横向布局 元素两端对齐 c-row-center

```css
.c-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
```
## 横向布局 元素两端有空隙 c-row-around

```css
.c-row-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
```
## 纵向布局 元素靠上 c-row-around

```css
.c-row-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
```
## 纵向布局 元素靠下 c-column-bottom

```css
.c-column-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
```
## 纵向布局 元素居中 c-column-center

```css
.c-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
```
## 交叉轴居上 c-ai-top

```css
.c-ai-top {
  align-items: flex-start;
}
```
## 交叉轴居下 c-ai-bottom

```css
.c-ai-bottom {
  align-items: flex-end;
}
```
## 交叉轴居中 c-ai-center

```css
.c-ai-center {
  align-items: center;
}
```
## 不换行 c-nowrap

```css
.c-nowrap {
  white-space: nowrap;
}
```
## 填充剩下的屏幕(高度) c-filling

```css
.c-filling {
  height: 10px;
  flex-grow: 1;
}
```
## 填充剩下的屏幕(宽度) c-filling-w

```css
.c-filling-w {
  width: 10px;
  flex-grow: 1;
}
```
## 内容超出1行后出现省略号 c-ellipsis1

```css
.c-ellipsis1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
```
## 内容超出2行后出现省略号 c-ellipsis2

```css
.c-ellipsis2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
```
## flex元素溢出换行 c-flex-wrap

```css
.c-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
```
## 文本溢出换行 c-txt-wrap

```css
.c-txt-wrap {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
```
## 元素溢出出现滚动条 c-overflow

```css
.c-overflow {
  overflow: auto !important;
}
```
## 吸顶  c-suctionTop

```css
.c-suctionTop {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
```
## 边框 c-border

```css
.c-border {
  border: solid 0.8px #e9ebed;
  /* box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 5px; */
}
```
## 禁止选中 c-no_select

```css
.c-no_select {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
```
## 禁止拖拽 c-no_drop

```css
.c-no_drop {
  cursor: default;
  pointer-events: none;
}
```
## 圆角边框 c-border-radius

```css
.c-border-radius {
  border-radius: 5px;
}
```
## 子元素圆角边框 c-z-border-radius>*

```css
.c-z-border-radius>* {
  border-radius: 5px;
}
```
## 下边框阴影 c-border-bottom

```css
.c-border-bottom {
 
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
```
## 文本右对齐 c-ta-right

```css
.c-ta-right {
  text-align: right;
}
```
## 图片内容自动裁剪

```css
.c-fit-cover {
  object-fit:cover;
}
```
## 图片内容自适应宽高

```css
.c-fit-contain {
  object-fit:contain;
}
```
## 滚动条美化 c-beautiful_scroll

```css
.c-beautiful_scroll {
  overflow: auto !important;
  overflow: overlay !important;
}
.c-beautiful_scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.c-beautiful_scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(221,222,224,0.4);
}
.c-beautiful_scroll::-webkit-scrollbar-track {
  border-radius: 10;
}
```
## 滚动条美化 c-beautiful_scroll_hover

```css
.c-beautiful_scroll_hover {
  overflow: hidden !important;
}
.c-beautiful_scroll_hover::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.c-beautiful_scroll_hover::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(221,222,224,0.4);
}
.c-beautiful_scroll_hover::-webkit-scrollbar-track {
  border-radius: 10;
}
.c-beautiful_scroll_hover:hover {
  overflow: auto !important;
  overflow: overlay !important;
}
```
## 
## 宽100百分比 c-w-?

```css
.c-w-0 {
  width: 0
}
 
.c-w-1 {
  width: 1%;
}
 
.c-w-2 {
  width: 2%;
}
 
.c-w-3 {
  width: 3%;
}
.c-w...100%
```
## 高100百分比 c-h-?

```css
.c-h-0 {
  height: 0
}
 
.c-h-1 {
  height: 1%;
}
 
.c-h-2 {
  height: 2%;
}
 
.c-h-3 {
  height: 3%;
}
.c-h-...100%
 
```
## 宽高百分百 c-w-h-100

```css
.c-w-h-100 {
  height: 100%;
  width: 100%;
}
 
```
## 子元素宽+高  c-z-?

例：c-z-w-100

```css
.c-z-w-100>* {
  width: 100%;
}
 
.c-z-w-99>* {
  width: 99%;
}
 
.c-z-w-98>* {
  width: 98%;
}
 
.c-z-w-97>* {
  width: 97%;
}
 
.c-z-w-96>* {
  width: 96%;
}
 
.c-z-w-95>* {
  width: 95%;
}
 
.c-z-w-94>* {
  width: 94%;
}
 
.c-z-w-93>* {
  width: 93%;
}
 
.c-z-w-92>* {
  width: 92%;
}
 
.c-z-w-91>* {
  width: 91%;
}
 
.c-z-w-90>* {
  width: 90%;
}
 
.c-z-h-100>* {
  height: 100%;
}
 
.c-z-h-99>* {
  height: 99%;
}
 
.c-z-h-98>* {
  height: 98%;
}
 
.c-z-h-97>* {
  height: 97%;
}
 
.c-z-h-96>* {
  height: 96%;
}
 
.c-z-h-95>* {
  height: 95%;
}
 
.c-z-h-94>* {
  height: 94%;
}
 
.c-z-h-93>* {
  height: 93%;
}
 
.c-z-h-92>* {
  height: 92%;
}
 
.c-z-h-91>* {
  height: 91%;
}
 
.c-z-h-90>* {
  height: 90%;
}
```
## 纵向布局 元素两端对齐 c-column-space-between

```css
.c-column-space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
```
## 最大高度为50 c-max-h50

```css
.c-max-h50 {
  height: 50vh;
}
```
## 最大宽度为50 c-max-w50

```css
.c-max-w50 {
  width: 50vw;
}
```
## 外边距 c-m

```css
.c-m {
  margin: 10px;
}
```
## 上外边距 c-mt

```css
.c-mt {
  margin-top: 10px;
}
```
## 下外边距 c-mb

```css
.c-mb {
  margin-bottom: 10px;
}
```
## 左外边距 c-ml

```css
.c-ml {
  margin-left: 10px;
}
```
## 右外边距 c-mr

```css
.c-mr {
  margin-right: 10px;
}
```
## 内边距 c-p

```css
.c-p {
  padding: 10px;
}
```
## 上内边距 c-pt

```css
.c-pt {
  padding-top: 10px;
}
```
## 下内边距 c-pb

```css
.c-pb {
  padding-bottom: 10px;
}
```
## 左内边距 c-pl

```css
.c-pl {
  padding-left: 10px;
}
```
## 右内边距 c-pr

```css
.c-pr {
  padding-right: 20px;
}
```
## 外边距20 c-m20

```css
.c-m20 {
  margin: 20px;
}
```
## 上外边距20 c-mt20

```css
.c-mt20 {
  margin-top: 20px;
}
```
## 下外边距20 c-mb20

```css
.c-mb20 {
  margin-bottom: 20px;
}
```
## 左外边距20 c-ml20

```css
.c-ml20 {
  margin-left: 20px;
}
```
## 右外边距20 c-mr20

```css
.c-mr20 {
  margin-right: 20px;
}
```
## 上内边距20 c-pt20

```css
.c-pt20 {
  padding-top: 20px;
}
```
## 下内边距20 c-pb20

```css
.c-pb20 {
  padding-bottom: 20px;
}
```
## 左内边距20 c-pl20

```css
.c-pl20 {
  padding-left: 20px;
}
```
## 右内边距20 c-pr20

```css
.c-pr20 {
  padding-right: 20px;
}
```
# 组合布局（c-layout-combination）

## 纵向布局（元素居上）+ 交叉居中 c-lc-ct_ac

```css
.c-lc-ct_ac {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
```
## 纵向布局（元素居中）+交叉居中 c-lc-cc_ac

```css
.c-lc-cc_ac {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}
```
## 纵向布局（元素居下）+ 交叉居中 c-lc-cb_ac

```css
.c-lc-cb_ac {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
```
## 横向布局（元素居左）+交叉居中 c-lc-rl_ac

```css
.c-lc-rl_ac {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
```
## 横向布局（元素居左）+交叉居中+内边距20+圆角边框+子元素高度百分百 c-lc-rl_ac_p20_br_zh100

```css
.c-lc-rl_ac_p20_br_zh100 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  border-radius: 5px;
}
```
## 横向布局（元素两端对齐）+交叉居中 c-lc-rbw_ai

```css
.c-lc-rbw_ai {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
```
## 纵向布局（元素居上）+ 交叉居中+子元素宽度百分百 c-lc-ct_ac_w100

```css
.c-lc-ct_ac_w100 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
 
}
.c-lc-ct_br_w100>* {
  width: 100%;
}
```
## 纵向布局（元素居上）+边框圆角+子元素宽度百分百 c-lc-ct_br_w100

```css
.c-lc-ct_br_w100 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 5px;
}
 
.c-lc-ct_br_w100>* {
  width: 100%;
}
```
## 纵向布局（元素居上）+边框圆角+内边距20 c-lc-ct_br_p20

```css
.c-lc-ct_br_p20 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 5px;
  padding: 20px;
}
```
## 最大高度为屏幕的70%+自动出现滚动条 c-lc-max_h_o

```css
.c-lc-max_h_o {
  max-height: 70vh;
  overflow: auto;
}
```
## 左右外边距10px c-lc-mlr

```css
.c-lc-mlr {
  margin-left: 10px;
  margin-right: 10px;
 
}
```
## 上下外边距10px c-lc-mtb

```css
.c-lc-mtb {
  margin-top: 10px;
  margin-bottom: 10px;
}
```
## 左右内边距10px c-lc-plr

```css
.c-lc-plr {
  padding-left: 10px;
  padding-right: 10px;
}
```
## 上下内边距10px c-lc-ptb

```css
.c-lc-ptb {
  padding-top: 10px;
  padding-bottom: 10px;
}
```
## 左右外边距20px c-lc-mlr20

```css
.c-lc-mlr20 {
  margin-left: 20px;
  margin-right: 20px;
}
```
## 上下外边距20px c-lc-mtb20

```css
.c-lc-mtb20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
```
## 左右内边距20px c-lc-plr20

```css
.c-lc-plr20 {
  padding-left: 20px;
  padding-right: 20px;
}
```
## 上下内边距20px c-lc-ptb20

```css
.c-lc-ptb20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
```

# 样式（c-layout-combination）

## 白色背景 c-sy-bgc_white

```css
.c-sy-bgc_white{
    background-color: #FFFFFF;
}
```
## 灰色背景 c-sy-bgc_white

```css
.c-sy-bgc_grey{
	background-color: #f0f2f5;
}
```
## 
## 白色字体 c-sy-color_white

```css
.c-sy-color_white {
    color: #FFFFFF;
}
```
## 红色字体 c-sy-color_red

```css
.c-sy-color_red {
    color: #FF0000;
}
```
## 灰色字体 c-sy-color_grey

```css
.c-sy-color_grey {
    color: #f0f2f5;
}
```
## 蓝色字体 c-sy-color_blue

```css
.c-sy-color_blue {
    color: #2979ff;
}
```
## 字体加粗 c-sy-fb

```css
.c-sy-fb {
    font-weight: bold;
}
```
## 上边框1px灰色实线 c-sy-border_top

```css
.c-sy-border_top{
    border-top:1px solid #F2F1F1
}
```
## 下边框1px灰色实线 c-sy-border_bottom

```css
.c-sy-border_bottom{
    border-bottom:1px solid #F2F1F1
}
```
## 删除线 c-sy-fd

```css
.c-sy-fd{
    text-decoration:line-through; 
}
```