Question

这是一个简单的布局问题，我不知道如何回答。

我有HGroup，其中包含三个元素：

常规Flex Group，应该伸展50％;
宽度以px（例如，100px）指定的按钮;
另一个应该占用其余空间的Flex Group。

问题是，告诉我的第三个元素（另一个Flex Group）获取所有可用空间的最佳方式是什么？

Answer 1

我将采取以下措施来保持50％的完整性

<s:HGroup width="100%">
    <s:Group width="50%" />
    <s:HGroup width="50%">
        <s:Button width="100"/>
        <s:Group width="100%" />
     </s:HGroup>
</s:HGroup>

编辑：多一点解释

将组宽度设置为100％将使其拉伸并占用剩余的空间（在右侧50％内）

Answer 2

你可以这样做，但杰森里夫斯的答案更好，更不容易失败。这种方法唯一真正的优点是H / VGroups数量较少，在渲染时不那么友好（如果你在舞台上有很多这样的布局，他们使用的布局会导致减速，或者他们有很多孩子。）无论如何，我会使用另一种方法。

<s:HGroup id="rectContainer" width="100%" height="100%" gap="0">
    <s:Rect id="rect1" width="50%" height="100%"/>
    <s:Rect id="rect2" width="100" height="100%"/>
    <s:Rect id="rect3" width="{this.rectContainer.width - ( .5 * this.rectContainer.width ) - rect2.width}" height="100%"/>
</s:HGroup>

Flex中的绝对和相对布局

2 个答案: