CSS实现了列布局可以拉伸和调整大小的特性，比如vscode。vscode抽象出来，其实就是这么一个布局，左右，上下都可以调整，如下：可伸缩可调的分栏布局大家也可以先看看实际效果：CSSStretchableColumnLayout2(juejin.cn)[1]。是不是很灵活？其实纯CSS也能达到这样的效果，一起来看看吧！一、基本实现原理要实现这个效果，需要用到resize特性，自然可以实现元素的拉伸特性。最常见的是textarea，默认可以拉伸。textareresize不过，这里我们需要的不是textarea，而是普通元素。对于普通元素也很容易实现这个效果，只需要在溢出不可见的时候加上resize属性即可。.resizable{调整大小：两者；overflow:scroll;}resize原理这么简单，那么怎么用呢？2.自定义右下角。虽然resize好像是可以拉伸的，但是可拉伸的范围太小了。如何增加伸缩范围？思路有两种：通过伪元素自定义容器的整体缩放先说第一种方式。要定义大小，首先需要了解resize指的是什么。经过简单的测试，发现在chrome中，resize其实是水平和垂直滚动条的结合处，比如直接设置滚动条的大小。::-webkit-scrollbar{宽度：20px；高度：20px；background-color:rosybrown;}resize其实就是滚动条的交界处。现在增加滚动条的高度：::-webkit-scrollbar{width:20px;高度：100px；background-color:rosybrown;}可以看到resize也变了。修改调整大小。当滚动条的高度足够大时，右边就变成了整个可以拉伸的条。::-webkit-scrollbar{宽度：20px；高度：100vh；background-color:rosybrown;}调整整个列的大小然后，这个斜杠条纹可以用伪元素::-webkit-resizer修改。div::-webkit-resizer{background-color:royalblue;}自定义resize颜色不幸的是，这个方法只适用于-webkit-浏览器，所以firefox是行不通的。再来看第二个思路：整体缩放。这里所说的整体放大是指通过transform将整个容器放大，这样右下角的resize也会放大，例如：div{width:300px;高度：20px；变换：scaleY(100)；/*足够大的放大倍率*/overflow:scroll;resize:horizo??ntal;}通过transfrom放大resize，使整个边都可以拉伸。让我们看看实际应用吧！3、分步实现两栏拉伸布局，先实现两栏布局。例如：两列布局通常有一定的约束。比如这里的MAIN是自适应空间，SIDE是固定大小。第一，快速编写布局和样式；
