Flexbox调整大小

Question

我正在尝试提出一种有效的方法来定义嵌套的flexbox并允许其调整大小。我认为快到了：

http://jsfiddle.net/6j10L3x2/1/

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

flex, flex-item, flex-resizer

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

这一切看起来都很好。但是，它只能处理使用flex-grow调整大小的项目。如果定义了flex-shrink或flex-basis，则这些计算根本不起作用。

有人可以提出一种修改此方法的方法，以使其在所有情况下均适用吗？我意识到在具有不同弹性配置的项目之间如何共享空间方面存在一些歧义，但是欢迎任何输入。

也欢迎任何替代方法。谢谢。

Answer 1

哇。给您留下深刻印象的是您如何使用flexGrow，出色的构想和代码通过香草javascript调整flexbox元素的大小。

我已经尝试改善html和css，以及几行代码以改善用户体验。

我做了什么？

我试图解决您没有完全描述的'问题'：

它仅处理具有flex-grow大小的项目。如果定义了flex-shrink或flex-basis，则这些计算根本不起作用。

1.-我简化了HTML：

• 请勿在flex-item

  内使用flex元素。

• 始终使用flex

或flex-item元素！flex元素。

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

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

以下是代码：

function manageResize(md, sizeProp, posProp) {
	var r = md.target;

	var prev = r.previousElementSibling;
	var next = r.nextElementSibling;
	if (!prev || !next) {
		return;
	}

	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];

	function onMouseMove(mm) {
		var pos = mm[posProp];
		var d = pos - lastPos;
		prevSize += d;
		nextSize -= d;
		if (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;
	}

	function onMouseUp(mu) {
		// Change cursor to signal a state's change: stop resizing.
		const html = document.querySelector('html');
		html.style.cursor = 'default';

		if (sizeProp === 'scrollWidth') {
			r.style.cursor = 'ew-resize'; 
		} else {
			r.style.cursor = 'ns-resize';
		}
		
		window.removeEventListener("mousemove", onMouseMove);
		window.removeEventListener("mouseup", onMouseUp);
	}

	window.addEventListener("mousemove", onMouseMove);
	window.addEventListener("mouseup", onMouseUp);
}

function setupResizerEvents() {
	document.body.addEventListener("mousedown", function (md) {

		// Used to avoid cursor's flickering
		const html = document.querySelector('html');
		
		var target = md.target;
		if (target.nodeType !== 1 || target.tagName !== "FLEX-RESIZER") {
			return;
		}
		var parent = target.parentNode;
		var h = parent.classList.contains("h");
		var v = parent.classList.contains("v");
		if (h && v) {
			return;
		} else if (h) {
			// Change cursor to signal a state's change: begin resizing on H.
			target.style.cursor = 'col-resize';
			html.style.cursor = 'col-resize'; // avoid cursor's flickering

			manageResize(md, "scrollWidth", "pageX");
			
		} else if (v) {
			// Change cursor to signal a state's change: begin resizing on V.
			target.style.cursor = 'row-resize';
			html.style.cursor = 'row-resize'; // avoid cursor's flickering

			manageResize(md, "scrollHeight", "pageY");
		}
	});
}

setupResizerEvents();
body {
	/* margin:0; */
	border: 10px solid #aaa;
}

flex {
	display: flex;
	overflow: hidden;
}

/* flex-item > flex {
    position: absolute;
    width: 100%;
    height: 100%;
} */

flex.h {
    flex-direction: row;
}

flex.v {
    flex-direction: column;
}

flex-item {
    /* display: flex; */
    /* position: relative; */
    overflow: hidden;
}

flex > flex-resizer {
    flex: 0 0 10px;
	/* background: white; */
	background-color: #aaa;
	background-repeat: no-repeat;
    background-position: center;
}

flex.h > flex-resizer {
	cursor: ew-resize;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
}

flex.v > flex-resizer {
	cursor: ns-resize;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>");
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>flex-splitter</title>
	<link rel="stylesheet" href="./src/styles.css">
	<script src="./src/index.js" defer></script>
</head>

<body>
	<flex class="v" style="flex: 1; height: 500px;">
		<flex-item style="flex: 1;">Flex 1</flex-item>
		<flex-resizer></flex-resizer>
		<flex class="h" style="flex: 1;">
			<flex-item style="flex: 1; background-color: aqua;">Flex 2</flex-item>
			<flex-resizer></flex-resizer>
			<flex class="v" style="flex: 2; ">
				<flex-item style="flex: 1; background: pink;">Flex 3</flex-item>
				<flex-resizer></flex-resizer>
				<flex class="h" style="flex: 1">
					<flex-item style="flex: 1; background: green;">Flex 4</flex-item>
					<flex-resizer></flex-resizer>
					<flex-item style="flex: 2;">Flex 5</flex-item>
					<!-- <flex-resizer></flex-resizer> -->
					<flex-item style="flex: 3; background: darkorange;">Flex 6</flex-item>
				</flex>
			</flex>
		</flex>
	</flex>
	
</body>
</html>

或在Codesandbox上查看：

希望对您有帮助！