Does Angular have a flex layout like extjs?

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.

回答1:

Turns out someone has create one and it does MOST of what I was looking for.

http://ngmodules.org/modules/flexy-layout

回答2:

You missing the point. Angular is only JS library that helps you with:

modularization your code
allow you load content asynchronously
change content using "magic" (two-way bindings)
etc.

It doesn't describe style of your site. You have to do it by yourself or use one of popular fluid/responsive CSS frameworks, i.e.:

Bootstrap by Twitter
Zurb Foundation
Inuit.css
Pure
Gumby
Metro UI
etc.

Just choose yourself and then apply to your site. Using that also make your design independent from JS (which is very bad) and JS framework (which is 9th circle of hell).