概述
可调整大小的分割面板 + 基于拖放的动态分割用于 React
@byeolnaerim/flex-layout是一个用于快速构建可调整大小的分割面板 UI 和基于拖放的动态分割的 React 组件。
例如，当需要将左侧设置为商店商品列表视图，右侧设置为实际穿戴预览视图，并且每个视图都需要可调整大小时，该库可以提供一个很好的解决方案。
起源故事
最初的 @byeolnaerim/flex-layout是在我成为二年级开发者时，想要作为个人项目创建一个基于 vanilla js 的商业消息应用时诞生的。
我希望它能像 Slack 或 vscode 一样，在各个组件之间相互调整大小。由于我觉得 vscode 的左侧视图配置很酷，所以我希望我创建的东西能与 vscode 类似。
随着时间的推移，我首次接触 React 时，将其重新构建为基于 TypeScript、rxjs 和 React 的组件。从可以通过拖动调整大小的现有遗留分割视图功能出发，我扩展了功能，以便创建 "几乎与 vscode 类似的动态分割视图"，这也是我过去的理念。
注意
不过，这个项目并不是一个完全新生的库，而是将过去的实现提升到最新技术栈的结果。因此，某些逻辑仍然不够 React 风格，并且依赖于 DOM 对象。
Grow Normalization
@byeolnaerim/flex-layout在最初创建时，我将 flex-grow 视为父布局的FlexLayoutContainer 子容器的数量作为整体增长的上限，FlexLayoutContainer 并理解为在其中规范化每个容器的比例。最大增长（这是一个错误的解释。）标准化FlexLayout
例如，如果子容器有两个，最大增长为2，比例为30% / 70%，那么实际增长应为0.668 / 1.332，基于这个假设，修正逻辑逐渐形成了现在的状态。@byeolnaerim/flex-layout这就是结果。
意图
有趣的是（也有点可怕），它在某种程度上按预期工作。未来这个库的任务可能就在这里，但现在的目标是准确解释过去的选择，而不是否定过去的自己，并设计成用户可以预测的形式。