很多頁面布局，特別是那種工具類的、比如編輯器、可視化平臺等，為了充分的利用屏幕空間，都會提供拖拽調(diào)節(jié)各個分欄尺寸的功能，比如像 vscode。

vscode

抽象開來，其實就是這樣一個布局，左右、上下都是可以調(diào)整的，如下：

可拉伸調(diào)整的分欄布局

你也可以先看實際效果：CSS 可拉伸分欄布局 2(juejin.cn)[1]。

是不是非常靈活呢?其實純 CSS 也是可以實現(xiàn)這樣的效果的，一起看看吧！

一、基本實現(xiàn)原理

實現(xiàn)這個效果需要借助 resize 特性，可以天然的實現(xiàn)元素拉伸特性。最常見的就是 textarea，默認就是可以拉伸的。

<textarea></textarea>

textare resize

不過，我們這里需要的不是textarea，而是普通的元素。普通的元素要實現(xiàn)這樣的效果也很容易，只需要在overflow不是visible的情況下，添加resize屬性就行了。

.resizable {
  resize: both;
  overflow: scroll;
}

resize

原理就是這么簡單，那么如何運用呢?

二、自定義右下角 resize

雖然看似可以拉伸，但是可拉伸范圍實在是太小了。該如何增加可拉伸范圍呢?這里有兩種思路：

• 通過偽元素自定義
• 容器整體放大

先說第一種思路。要定義尺寸，首先需要搞明白 resize指的是什么?經(jīng)過簡單的測試發(fā)現(xiàn)，在 chrome 中，resize其實就是橫縱滾動條的交界處，比如直接設置滾動條的尺寸。

::-webkit-scrollbar {
  width: 20px; 
  height: 20px;
  background-color: rosybrown;
}

resize 其實是滾動條交界處

現(xiàn)在將滾動條高度改大一點：

::-webkit-scrollbar {
  width: 20px; 
  height: 100px;
  background-color: rosybrown;
}

可以看到 resize也跟著變化了。

修改 resize 尺寸

當滾動條高度足夠大時，右側(cè)就變成整條都可以拉伸了。

::-webkit-scrollbar {
  width: 20px; 
  height: 100vh;
  background-color: rosybrown;
}

整列的resize

然后，這個斜線條紋可以用偽元素::-webkit-resizer來修改。

div::-webkit-resizer{
  background-color: royalblue;
}

自定義 resize 顏色

不過遺憾的是，這種方式只適合-webkit-瀏覽器，所以firefox就不行了。

下面來看第二種思路：整體放大。

這里說的整體放大，指的是將整個容器通過transform進行放大，這樣一來，右下角的resize也會跟隨放大了，比如：

div{
  width: 300px;
  height: 20px;
  transform: scaleY(100);/*足夠大的放大倍數(shù)*/
  overflow: scroll;
  resize: horizontal;
}

通過 transfrom 整體放大resize

這樣也能達到整條側(cè)邊都可以拉伸的目的了。

下面來看實際應用吧！

三、兩欄拉伸布局

循序漸進，先實現(xiàn)兩欄布局。比如這樣：

兩欄布局

通常這類布局都有一定的約束，比如這里的 MAIN是自適應空間的，SIDE是固定尺寸，先快速寫出布局和樣式；

<div class="con">
  <aside>
    SIDE
  </aside>
  <main>
    MAIN
  </main>
</div>

關鍵樣式如下：

.con{
  display: flex;
}
aside{
  width: 200px;
}
main{
  flex: 1;
}

那么，如何讓左邊側(cè)邊欄居右拖拽功能呢?很簡單，將剛才可拉伸的元素放入側(cè)邊欄，讓寬度由里面的拉伸元素決定(flex 子元素天然支持該特性)，內(nèi)容則用絕對定位覆蓋來實現(xiàn)，實現(xiàn)如下：

<aside>
  <div class="resize"></div>
  <div class="line"></div>
  <section>SIDE</section>
</aside>

由于 firefox的resize無法自定義，所以這里單獨一個標簽來模擬拉伸軸。

aside{
  position: relative;
  overflow: hidden;

}
.resize{
  width: 200px;
  height: 16px;
  transform: scaleY(100);
  overflow: scroll;
  resize: horizontal;
  opacity: 0;
}
.line{
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  bottom: 0;
  background-color: royalblue;
  opacity: 0;
  transition: .3s;
  pointer-events: none;
}

.resize:hover+.line,
.resize:active+.line{
  opacity: 1;
}

這樣就實現(xiàn)了左邊側(cè)邊欄拉伸的功能。

兩欄可拉伸布局

四、三欄拉伸布局

有時候會出現(xiàn)兩邊側(cè)邊欄，中間部分是自適應的，如下：

三欄布局

這種如何實現(xiàn)呢?首先按照兩欄布局的思路。

<div class="con">
  <aside>
    <div class="resize"></div>
    <div class="line"></div>
    <section>SIDE</section>
  </aside>
  <main>
    MAIN
  </main>
  <aside class="right">
    <div class="resize"></div>
    <div class="line"></div>
    <section>SIDE</section>
  </aside>
</div>

不過這樣會有一個很明顯的問題，由于resize是在右側(cè)，如果放在右邊側(cè)邊欄，那肯定就相反了，具體表現(xiàn)就是，往右拉伸，右側(cè)邊欄反而增大，不符合直覺。

有沒有什么辦法讓resize到左邊來呢?

首先想到的是通過翻轉(zhuǎn)變換，水平方向上翻轉(zhuǎn)可以scaleX(-1)來實現(xiàn)，合并起來就是。

.right .resize{
  transform: scale(-1, 100);
}

在 Chrome 下表現(xiàn)不錯

Chrome 效果

但是，F(xiàn)irefox 就有點奇怪了。

Firefox 效果

朝右邊拖拽，右側(cè)邊欄寬度反而增加。究其原因，在 Firefox上，transform水平翻轉(zhuǎn)僅僅改變了視覺上的效果，并沒有改變交互行為，有沒有辦法可以真正改變resize的位置呢?

還真有，不過僅可以改變水平方向上的位置，通過direction屬性。這是一個可以改變文檔方向流的屬性，有些語言方向是從右往左的，所以設置后，resize 也從右側(cè)變到了左側(cè)。

通過 direction 改變resize 位置

所以實現(xiàn)就是。

.right .resize{
  direction: rtl;
}

這樣下來，Chrome 和 Firefox 均正常了。

Firefox 效果

完整代碼可以訪問：CSS 可拉伸分欄布局 (codepen.io)[2]或者CSS 可拉伸分欄布局 (juejin.cn)[3]。

五、其他組合分欄效果

組合分欄效果少不了垂直方向上的。

垂直方向的分欄和水平方向大同小異，只需要水平方向上縮放足夠大就行了。

.resize-top{
  width: 16px;
  resize: vertical;
  transform: scaleX(100);
}

現(xiàn)在可以嘗試實現(xiàn)文章開頭布局效果。

<div class="con">
  <aside>
    <div class="resize"></div>
    <div class="line"></div>
    <section>SIDE</section>
  </aside>
  <main>
    <div class="main">
      MAIN
    </div>
    <footer>
      <div class="resize resize-top"></div>
      <div class="line"></div>
      <section>bottom</section>
    </footer>
  </main>
</div>

不過有個缺陷就是，無法通過direction或者其他手段，將resize真正地從下移到上面。

Firefox 下無法將 resize 移到頂部

只能通過transform: scale(-1, 100);實現(xiàn)了，這樣就導致垂直方向上的拉伸在 Firefox 體驗不佳。效果如下：

Chrome 表現(xiàn)完美：

Chrome 效果

Firefox 表現(xiàn)差強人意：

Firefox效果(垂直方向不理想)

完整代碼可以訪問：CSS 可拉伸分欄布局 2(codepen.io)[4] 或者CSS 可拉伸分欄布局 2(juejin.cn)[5]。

繼續(xù)調(diào)整一下，還可以實現(xiàn)這樣的布局效果。

完整代碼可以訪問：CSS 可拉伸分欄布局 3(codepen.io)[6] 或者CSS 可拉伸分欄布局 3(juejin.cn)[7]。

六、總結(jié)一下

以上就通過純 CSS 實現(xiàn)了4種常見的分欄拉伸效果，基本能滿足常見的布局需求了，是不是非常實用呢?下面總結(jié)一些要點

• 實現(xiàn)原理是 CSS resize 屬性；
• resize 生效的條件是 overflow 不能是 visible；
• resize 在 Chrome 下其實是橫縱滾動條的交匯處，改變滾動條尺寸可以改變 resize 大小；
• resize 還可以通過縮放整體容器來實現(xiàn)；
• resize 默認是在右下角，可以通過水平翻轉(zhuǎn)到左下角，Chrome 完美支持拉伸，F(xiàn)irefox 不行；
• 還可以通過 direction 改變文檔流的方式，將 resize 從右下角變到左下角；
• 垂直方向上 resize 只能通過 transform 翻轉(zhuǎn)方式實現(xiàn)，因此 Firefox 體驗較差。

雖然 Firefox 在垂直方向上略有缺陷，如果你對兼容性沒太多需求，比如公司內(nèi)部項目，Electron 應用等，那就放心大膽的使用吧，千萬不要被兼容性束縛了你的思維。