Html Flexbox大小调整

我试图找到一种有效的方法来定义嵌套的flexbox，并允许它调整大小。我想就快到了：

我使用三个自定义元素纯粹是为了使标记更具声明性：

flex, flex-item, flex-resizer

flex表示容器。flex项表示容器中的一个元素，flex resizer表示一个resizer小部件，它可以放置在两个flex项之间，以在它们之间添加调整大小的功能

这一切似乎都很有效。但是，它只处理使用flex grow调整大小的项目。如果定义了“弹性收缩”或“弹性基础”，则计算根本不起作用

有人能提出一种方法来修改它，使其适用于所有情况吗？我意识到，对于如何在具有各种flex配置的项目之间共享空间存在一些模糊性，但欢迎任何输入

---

任何替代办法也将受到欢迎。谢谢。

哇。我对您如何使用“flexGrow”和优秀的想法和代码，用普通javascript调整flexbox元素的大小印象深刻

我已经从几个方面改进了你的代码，它运行得非常好

我做了什么

1.-我简化了HTML：

• 请勿在flex项目中使用flex元素

• 始终使用flex或flex项目元素！，在另一个里面 flex元素

-解决了！ 可见flex项目大小小于其内容大小时拆分器的跳转

3.-我添加了不同的游标来表示状态的更改（setupResizerEvents，onMouseUp），以提高可用性

4.-我添加了代码以防止光标在拖动时闪烁

5.-在manageResize（）中使用offsetWidth和offsetHeight与scrollWidth和scrollHeight对比，以避免弹性项内容溢出时拆分器在调整大小时跳转（溢出：自动）

代码如下：

函数manageResize（md、sizeProp、posProp）{
var r=md.target；
var prev=r.PreviousElement同级；
var next=r.nextElementSibling；
如果（！prev | |！next）{
返回；
}
md.preventDefault（）；
var prevSize=prev[sizeProp]；
var nextSize=next[sizeProp]；
var sumSize=prevSize+nextSize；
var prevGrow=Number（prev.style.flexGrow）；
var nextGrow=Number（next.style.flexGrow）；
var sumGrow=prevGrow+nextGrow；
var lastPos=md[posProp]；
移动鼠标的功能（毫米）{
var pos=毫米[posProp]；
var d=位置-最后位置；
prevSize+=d；
nextSize-=d；
如果（prevSize<0）{
nextSize+=prevSize；
pos-=prevSize；
prevSize=0；
}
if（nextSize<0）{
prevSize+=nextSize；
pos+=nextSize；
nextSize=0；
}
var prevGrowNew=sumGrow*（prevSize/sumSize）；
var nextGrowNew=sumGrow*（nextSize/sumSize）；
prev.style.flexGrow=prevGrowNew；
next.style.flexGrow=nextGrowNew；
lastPos=pos；
}
函数onMouseUp（mu）{
//更改光标以表示状态更改：停止调整大小。
const html=document.querySelector（'html'）；
html.style.cursor='default'；
如果（posProp==='pageX'）{
r、 style.cursor='ew resize'；
}否则{
r、 style.cursor='ns resize'；
}
removeEventListener（“mousemove”，onMouseMove）；
removeEventListener（“mouseup”，onMouseUp）；
}
addEventListener（“mousemove”，onMouseMove）；
addEventListener（“mouseup”，onMouseUp）；
}
函数setupResizerEvents（）{
document.body.addEventListener（“鼠标向下”，函数（md）{
//用于避免光标闪烁
const html=document.querySelector（'html'）；
var-target=md.target；
if（target.nodeType！==1 | | target.tagName！==“FLEX-RESIZER”）{
返回；
}
var parent=target.parentNode；
var h=parent.classList.contains（“h”）；
var v=parent.classList.contains（“v”）；
如果（h&v）{
返回；
}若否(h){
//更改光标以表示状态的更改：开始在H上调整大小。
target.style.cursor='col resize'；
html.style.cursor='col resize'；//避免光标闪烁
//使用offsetWidth与scrollWidth（和clientWidth）来避免在flex项目内容溢出（溢出：自动）时拆分器跳转调整大小。
manageResize（md，“offsetWidth”，“pageX”）；
}若否(v){
//更改光标以表示状态的更改：开始在V上调整大小。
target.style.cursor='row resize'；
html.style.cursor='row resize'；//避免光标闪烁
manageResize（医学博士，“视线外”，“页面”）；
}
});
}
setupResizerEvents（）
正文{
/*保证金：0*/
边框：10px实心#aaa；
}
弯曲{
显示器：flex；
溢出：隐藏；
}
/*弹性项目>弹性{
位置：绝对位置；
宽度：100%；
身高：100%；
} */
flex.h{
弯曲方向：行；
}
flex.v{
弯曲方向：立柱；
}
弹性项目{
/*显示器：flex*/
/*位置：相对位置*/
/*溢出：隐藏*/
溢出：自动；
}
flex>flex大小调整器{
柔性：0 10px；
/*背景：白色*/
背景色：#aaa；
背景重复：无重复；
背景位置：中心；
}
flex.h>flex resizer{
光标：ew调整大小；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
flex.v>flex大小调整器{
光标：ns调整大小；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

挠性分离器
Flex 1
showCursorCoor：