/* flex */
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flx-start-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.flx-start-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.flx-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flx-end-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flx-align-center {
  display: flex;
  align-items: center;
}
.flx-col {
  display: flex;
  flex-direction: column;
}
.flx-shrink {
  flex-shrink: 0;
}
.flx {
  display: flex;
}
.user-sel-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* flex布局 */
.flx-1 {
  flex: 1;
}
.flx-2 {
  flex: 2;
}
.flx-3 {
  flex: 3;
}

.w-screen {
  width: 100vw;
}
.h-screen {
  height: 100vh;
}
.w-full {
  width: 100% !important;
}
.w-auto {
  width: auto !important;
}
.h-full {
  height: 100%;
}
.h-auto {
  height: auto !important;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-auto {
  overflow-x: auto;
}

/* clearfix */
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: "";
}

/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; /* 配合 -webkit-line-clamp 使用 */

  // display: box;
  line-clamp: 2;
  box-orient: vertical; /* 标准属性的兼容写法 */
  overflow: hidden;
}

/* 文字多了自动換行 */
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}

/* 文字不換行 */
.white-nowrap-word {
  white-space: nowrap;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}
.fade-transform-enter-from {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(30px);
}

/* breadcrumb-transform */
.breadcrumb-enter-active {
  transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}