Angular是否具有像extjs这样的弹性布局？ [英] Does Angular have a flex layout like extjs?
问题描述
红色框是一个hbox布局，块E和F具有总和为3的给定flex值，所以E获得1/3的宽度屏幕和F获得2/3。
蓝盒是另一个hbox布局，其中所有4个（AD）具有相同的flex，因此每个都获得25％的空格。
没有显示的是周围的vbox布局，其中蓝色框的弹性为22，红色框的弯曲为78。 >
有什么像Angular这样的布局吗？如果没有，你会如何把它放在一起？
以下答案：
我想要用Angular替换extj。要做到这一点，我需要一些功能，我在extjs，我不知道存在于角度。我已经找到了方法来观看屏幕尺寸，改变以调整整体显示尺寸，但是我还没有看到一个很好的例子，这个指令基本上是介绍了它的这个flex值的组成指令，并根据大小来设置它们的大小更改事件的容器。 Flex不能在div内部工作，它可以在div的容器内部工作，因为它必须遍历容器中的所有div以正确分隔空间。我没有看到一个有角度的指令，这样做还没有。
我没有Angular的实际开发经验（我看过很多来自 http://egghead.io ，我已阅读文档和教程，听取了这个播客： JSJ-Angular ），所以我不知道这是容易解决的东西，还是难以解决，或者有人已经解决了。这种弹性布局是非常酷和易于使用的，实际上对于全页面的应用程序，我不知道有没有一个更简单的方法来放置它们，使它们保持全屏，并且是可扩展的屏幕尺寸更改。网格系统对于某些事情来说非常棒，但是它们并没有解决flex系统所涉及的内容。
我试图看看是否有一种从extjs跳过的方法
其他发现的信息
看起来flex正在成为CSS display：flex 或显示形式的显示类型：inline-flex （目前有前缀）
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
有趣的是看到这个插图称之为 Holy Grail Layout example 。当然，IE不会正确地或者是及时地实现它，但是如果完成这个工作，我的客户不介意使用Chrome。
事实证明，有人创造了一个，而且它正在寻找最多的东西。
http://ngmodules.org/modules/flexy-layout
ExtJS has a very useful layout mechanism called flex. It works by summing all the things on a row or in a column. Then the space is parceled out using the flex value divided by the sum of all the flex values. This results in a layout like below:
The Red box is an hbox layout, the blocks E and F have the given flex values that sum up to 3, so E gets 1/3 the width of the screen, and F gets 2/3rds.
The Blue box is another hbox layout, where all 4 pieces (A-D) have the same flex so each one gets 25% of the space.
What isn't shown is the surrounding vbox layout where the blue box has a flex of 22 and the red box has a flex of 78.
Is there anything like this kind of layout in Angular? If there isn't, how would you put this together in Angular?
Additional information based on some of the answers below:
I want to be able to replace extjs with Angular. To do that I need some functionality that I have in extjs that I don't know exists in Angular. I've found ways to watch for screen size, change to adjust the overall display size, but I haven't seen a good example yet of a directive that essentially introspects its constituent directives for this flex value and sets their size based on a size change event of the container. Flex doesn't work from inside the divs, it works inside the container of the divs, because it has to go across all the divs in the container to divide the space correctly. I haven't seen an angular directive that does this yet.
I have no actual development experience with Angular yet (I've watched many of the videos from http://egghead.io, I've read documentation and tutorials, listened to this podcast: JSJ-Angular) and so I don't know if this is something that is easy to solve, or hard to solve, or if someone has already solved it. This flex layout is wickedly cool and easy to use, in fact for full page apps, I'm not sure there is an easier way to lay them out so that they stay full screen and are malleable to screen size changes. Grid systems are great for some things, but they don't address what the flex system addresses.
I'm trying to see if there is a way to leap from extjs to Angular without really making my life difficult.
Additional discovered information:
Looks like flex is becoming a display type now in the form of the CSS display: flex or display: inline-flex (with prefixes at the moment)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to see the illustration calls it the Holy Grail Layout example. Of course IE won't implement it right, or in a timely fashion, but my customers don't mind using Chrome if it gets the job done.
Turns out someone has create one and it does MOST of what I was looking for.
http://ngmodules.org/modules/flexy-layout
这篇关于Angular是否具有像extjs这样的弹性布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
