两栏布局，左侧可伸缩，右侧宽度自适应

使用的是vue框架，i标签的class用的element

HTML

<div class="index">
    <div class="left" :class="{fold: isFold}">
        <span class="fold-button" @click="foldClick">
          <i class="el-icon-arrow-right" :class="{right: isFold}"></i>
        </span>
    </div>
    <div class="right"></div>
</div>
复制代码

CSS

.index{
    display: table;
    table-layout: fixed;
    width: 100%;
    .left{
        width: 200px; // 左侧栏宽度
        display: table-cell;
        position: relative;
        &.fold{ // 折叠
            width: 0;
        }
    }
    .right{
        pading: 20px;
    }
    .fold-button{
    display: inline-block;
    padding: 20px 5px;
    border-radius: 0 3px 3px 0;
    border: 1px solid #ddd;
    border-left: none;
    background: #fff;
    position: absolute;
    left: 100%;
    top: 20%;
    cursor: pointer;
        >i{
            transform: rotate(0);
            transition: .5s all;
            &.right {
                transform: rotate(180deg);
            }
        }
    }
}
复制代码

JS

export default {
  components: {
  },
  data () {
    return {
      isFold: false
    }
  },
  methods: {
    foldClick () {
      this.isFold = !this.isFold
    }
  }
}
复制代码

总结：index使用table布局，宽度为100%，table-layout设置为fixed，left为table-cell，宽度展开为200px，收起为0，这样就达到左侧可折叠，右侧宽度自适应的效果