元素的比例定位

Question

我正在制作我的第一个电子应用程序。我有最初的layout。我想要的是当用户调整窗口大小时：

• 红色部分应改变宽度和高度
• 蓝色部分应仅改变高度，但不能改变宽度
• 绿色部分应仅改变宽度，而不改变高度

在.NET WinForms中，这将是一项微不足道的任务：

• 将红色锚点设置为左，上，右，下
• 将蓝色锚点设置为顶部，右侧，底部
• 和绿色锚点左，右，下

如何使用HTML + CSS实现相同的效果？

我想我可以使用table元素，但我已经读过不鼓励在页面布局中使用表格。

Answer 1

这可能对您有用：

＆＃13;

＆＃13;

.main {
  min-height: 100vh;
  display: flex;
}
.blue {
  background: blue;
  flex: 1;
}
.sub {
  margin-right:5px;
  flex: 3;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
  margin-bottom:5px;
}
.green {
  background: green;
  flex: 0 0 10%;
  }

＆＃13;

<div class="main">
	<div class="sub">
		<div class="red"></div>
		<div class="green"></div>
	</div>
  <div class="blue"></div>
</div>

＆＃13;

＆＃13;

＆＃13;