// 文字显示一行,一行之后溢出隐藏
@mixin ellipsis($width: 100%) {
  max-width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 多行文字
@mixin ellipsis-multi($row: 2, $width: 100%) {
  display: -webkit-box;
  max-width: $width;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $row;
}
// /**
// * 缩放
// * $numb  缩放倍数默认0.8
// * $X   X轴缩放中心点 (left,center,right,百分比,像素等等都可以)
// * $Y   Y轴缩放中心点 (top,center,bottom,百分比,像素等等都可以)
// */
@mixin scale($numb: 0.8, $X: center, $Y: center) {
  transform: scale($numb, $numb);
  transform-origin: $X $Y;
}
// /**
// *
// * $flex-direction:  属性决定主轴的方向
// *        row: 主轴为水平方向,起点在左端。 (默认值)
// *        row-reverse: 主轴为水平方向,起点在右端。
// *        column: 主轴为垂直方向,起点在上沿。
// *        column-reverse: 主轴为垂直方向,起点在下沿。
// *
// *	$flex-wrap:  主轴是否换行
// *        nowrap: 不换行。(默认值)
// *        wrap: 换行,第一行在上方。
// *        wrap-reverse: 换行,第一行在下方。
// *
// *	$justify-content: 属性定义了项目在主轴上的对齐方式
// *        flex-start: 左对齐(默认值)
// *        flex-end: 右对齐
// *        center: 居中
// *        space-between: 两端对齐,项目之间的间隔都相等。
// *        space-around: 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
// *
// *	$align-items:   属性定义了项目在交叉轴上的对齐方式
// *        flex-start: 交叉轴的起点对齐。
// *        flex-end: 交叉轴的终点对齐。
// *        center: 交叉轴的中点对齐。
// *        baseline: 项目的第一行文字的基线对齐。
// *        stretch: 如果项目未设置高度或设为auto将占满整个容器的高度(不足就填充)
// *
// *	$align-content:  属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
// *        flex-start:  与交叉轴的起点对齐。
// *        flex-end:  与交叉轴的终点对齐。
// *        center:  与交叉轴的中点对齐。
// *        space-between:  与交叉轴两端对齐,轴线之间的间隔平均分布。
// *        space-around:  每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
// *        stretch:  轴线占满整个交叉轴(不足就填充)
// *
// */
@mixin flex($flex-direction: row, $flex-wrap: nowrap, $justify-content: center, $align-items: center, $align-content: center) {
  display: flex;
  flex-flow: $flex-direction $flex-wrap;
  place-content: $align-content $justify-content;
  align-items: $align-items;
  min-width: 0;
}
