概述
可調整大小的分割面板 + 用於 React 的拖放動態分割
@byeolnaerim/flex-layout是一個快速構建可調整大小的分割面板 UI 和基於拖放的動態分割的 React 組件。
例如，當需要將左側設置為商店商品列表視圖，右側設置為實際穿戴預覽視圖，並且每個視圖都需要可調整大小時，此庫可以提供良好的解決方案。
起源故事
最初的 @byeolnaerim/flex-layout是在我成為二年級開發者時，想要作為個人項目創建基於 vanilla js 的商業用即時通訊工具時誕生的。
我希望它能像 Slack 或 vscode 一樣，彼此之間可以調整大小。對我來說，vscode 的左側視圖配置看起來很棒，因此我希望我創建的東西能夠類似於 vscode 的運作。
隨著時間的推移，我首次接觸 React，並將其重新構建為基於 TypeScript、rxjs 和 React 的組件。從可以通過拖動調整大小的舊有分割視圖功能，擴展到 "希望它能夠幾乎像 vscode 一樣運作" 的過去理念，實現了拖放動態分割視圖的功能。
注意
不過，這個項目並不是完全重新誕生的庫，而是將過去的實現提升到最新技術棧的結果。因此，仍然有一些邏輯不夠 React 化，並依賴於 DOM 對象。
增長標準化
@byeolnaerim/flex-layout在最初創建時，我將 flex-grow 作為上層佈局的FlexLayoutContainer 基準，將子容器的數量作為整體增長的上限，彈性佈局容器 理解為在其中正規化每個容器的比例，最大增長以便進行分配的概念。（這是錯誤的解釋。）標準化FlexLayout
例如，如果子容器有兩個，最大增長為2，比例為30% / 70%，那麼實際增長應該是0.668 / 1.332，基於這個假設，修正邏輯堆疊成現在的樣子。@byeolnaerim/flex-layout這樣就完成了。
意圖
有趣的是（也有點可怕），它在某種程度上按預期運作。未來這個庫的挑戰可能就在這裡，但目前的目標是準確解釋過去的選擇，並設計成用戶可以預測的形式。