元素的比例定位

我正在制作我的第一个电子应用程序。我有最初的layout。当用户改变我想是窗口：元素的比例定位

红色部分应该改变宽度和高度
蓝色部分应该只改变高度，但不宽
绿色部分应该只改变宽度，但高度不

在.NET的WinForms这将是一个重要的任务：

设置红色锚左，上，右，下
设置蓝锚上，右，下
和绿色锚到左，右，下

我怎样才能实现与HTML + CSS同样的效果？

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

2017-03-05 Cole Pfeiffer

你可能想看看Flexbox的布局:) https://developer.mozilla.org/en-US/docs/ Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes – MimiEAM

@MimiEAM，我会研究它。似乎很有趣。刚刚找到了圣杯演示，几乎正是我需要的。 –

这可能会为你工作：

.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%; 
 
    }

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

来源

2017-03-05 12:40:30

不幸的是，这并没有扩大到底部，即没有底部锚。当窗口上下拖动时，红色和蓝色部分必须与窗口一起拉伸，而绿色部分必须始终位于底部。 –

是的，这次工作正常。 –

嗯，不是很好:)我希望绿色和蓝色的部分保持其一侧永远不变。因此，我必须在绿色选择器中的'flex：0 0 10％'中将百分比替换为像素，对蓝色部分替换百分比。 –

元素的比例定位

回答

相关问题