flex布局样式代码封装

这个文件我是存放在static/css文件夹下的，创建一个文件命名flex.scss

是我在绘制页面的时候常用到的flex组合样式(uni-app)，后续也可根据自己所需添加组合样式。

.row-start-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.row-start-start-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.row-start-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}
.row-end-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}
.row-start-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.row-start-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.row-end-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.row-end-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}
.row-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.row-between-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.row-between-start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.row-around-center {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.row-around-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.row-around-start-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
}
.column-start-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.column-start-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.column-between-start {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.column-between-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.column-center-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.column-center-start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.column-around-center {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.row-center-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.no-list {
  width: 100%;
  height: 240rpx;
  line-height: 240rpx;
  text-align: center;
  font-weight: bold;
  font-size: 30rpx;
  color: #999;
}
.divider {
  width: 100%;
  height: 10rpx;
  background-color: #f7f9fd;
}
.white-space {
  box-sizing: border-box;
  padding: 30rpx;
  width: 100%;
}
.text-beyond {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-wrap2{
  overflow: hidden;
  /* 2.用省略号来代替超出文本 */
  text-overflow: ellipsis;
  /* 3.设置盒子属性为-webkit-box  必须的 */
  display: -webkit-box;
  /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
  -webkit-line-clamp: 2;
  /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
  word-break: break-all;
  /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
  -webkit-box-orient: vertical;
}

将其挂载到全局，可以在app.vue文件中引入flex.scss文件，也可挂载到main.js

在项目当中使用如下：