红色框是一个hBox布局,块E和F具有总和为3的给定弹性值,因此E得到屏幕宽度的1/3,F得到2/3rds.

蓝色框是另一个hBox布局,其中所有4个部分(A-D)具有相同的flex,因此每个部分获得25％的空间.

未显示的是周围的vBox布局,其中蓝色框的flex为22,红色框的flex为78.

Angular中有这种布局吗？如果没有,你会怎么把它放在Angular中？

基于以下一些答案的其他信息：

我希望能够用Angular替换extjs.要做到这一点,我需要一些我在extjs中有的功能,我不知道它存在于Angular中.我已经找到了观察屏幕尺寸的方法,改变以调整整体显示尺寸,但我还没有看到一个很好的例子,它基本上是对这个flex值的组成指令进行内省,并根据尺寸设置它们的大小改变容器的事件. Flex不能在div内部工作,它在div的容器内工作,因为它必须遍历容器中的所有div才能正确划分空间.我还没有看到过这样做的角度指令.

我没有Angular的实际开发经验(我已经观看了很多来自http://egghead.io的视频,我已经阅读了文档和教程,听过这个播客：JSJ-Angular)所以我不知道这是否容易解决,或难以解决,或者如果某人已经解决了它.这种灵活的布局非常酷且易于使用,实际上对于整页应用程序,我不确定是否有更简单的方法来布局它们以便它们保持全屏并且具有屏幕尺寸变化的可塑性.网格系统对某些东西很有用,但它们并没有解决弹性系统所处理的问题.

我试图看看是否有办法从extjs跳到Angular而不会让我的生活变得困难.

其他发现的信息：

看起来flex现在以CSS显示的形式成为显示类型：flex或display：inline-flex(目前有前缀)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

有趣的是看到插图称之为圣杯布局示例.当然IE不会正确或及时地实现它,但我的客户不介意使用Chrome,如果它完成了工作.