2021-03-26 CSS样式之Flex实战

问题描述：如下图，案件类型是根据业务范围选择而变化的，所以案件类型这行的宽度是会动态变化的，既要保证不能超出，又要使更多文字不能与证券与资本市场这一类最后一行的按钮重合；并且点击更多会显示剩余的选项

解决方法：利用flex布局，全部与中间选项以及更多分为三个部分，统一放在一个div里面，布局为dispaly:flex

然后中间按钮布局如下：内部使用flex布局，而且使得超出换行flex-wrap:wrap

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  .el-checkbox-button {
    margin-bottom: 10px;
  }
}

更多布局为flex:none，默认原始大小不放大也不缩小

另外点击更多和小箭头会显示剩余的选项按钮，这里写了个动态样式

.type-show {
  overflow: visible;
 }

 .type-hidden {
   height: 40px;
   overflow: hidden;
 }

一开始给到中间选项一个固定高度，这样就会隐藏调超出的，而且不会与更多重叠，点击显示的时候，高度去掉，这样又换行了，完美！