CSS实现了一个可以拉伸和调整大小的列布局，会提供拖拽调整每列大小的功能，比如抽象vscode，其实就是这样的布局，大家也可以先看看实际效果:CSSStretchableColumnLayout2(codepen.io)是不是很灵活呢？其实纯CSS也可以达到这样的效果。一起来看看吧。一、基本实现原理要实现这个效果，需要用到resize特性，自然可以实现元素拉伸特性。最常见的是textarea，默认可以拉伸但是，这里我们需要的不是textarea，而是普通的元素。普通元素实现这种效果也很容易，只需要在不可见溢出的时候加上resize属性即可。resizable{resize:both;的原理overflow:scroll;}这么简单，那么怎么用呢？2、自定义右下角resize虽然看起来是可以伸缩的，但是伸缩范围太小了。如何增加伸缩范围？这里有两种思路：通过伪元素自定义容器的整体缩放先说第一种思路。定义size首先要明白resize指的是什么？经过简单的测试，发现在chrome中，resize其实是水平和垂直滚动条的交界处，比如直接设置滚动条的大小::-webkit-scrollbar{width:20px;高度：20px；background-color:rosybrown;}现在增加滚动条的高度::-webkit-scrollbar{width:20px;高度：100px；background-color:rosybrown;}可以看到，当滚动条的高度足够大时，resize也会发生变化，右侧变为Theentirestripcanbestretched::-webkit-scrollbar{width:20px;高度：100vh；background-color:rosybrown;}然后，这个对角条纹可以用伪元素::-webkit-resizerdiv修改：:-webkit-resizer{background-color:royalblue;}不幸的是，这种方法只适用于-webkit-浏览器，因此firefox将无法运行。再来看第二个思路：整体缩放。这里说的整体放大是指通过transform将整个容器放大，这样右下角的resize也会放大，比如div{width:300px;高度：20px；transform:scaleY(100);/*足够的放大倍数*/overflow:scroll;resize:horizo??ntal;}这样也可以达到拉伸整个边的目的。让我们来看看实际应用。3、分步实现两栏拉伸布局，先实现两栏布局。例如，这种类型的布局通常有一定的限制。比如这里的MAIN是自适应空间，SIDE是固定大小的。一、快速编写布局和样式
