I know next to nothing about CSS flex boxes. I have heard passing mention of them, but have never played with them. So when I was casting about looking for another topic to research for Patterns in Polymer, flex boxes seemed a reasonable next step. Then I ran into minor, unrelated technical difficulties in both JavaScript and Dart that sidetracked me. Tonight, I would like to make sure that I understand this before moving on.
The default, horizontal flex box seems to work fairly well. The following HTML (using Polymer.dart):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Test</title>
<!-- Load component(s) -->
<link rel="import" href="/packages/polymer_elements/polymer_flex_layout/polymer_flex_layout.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<style>
.main {
background-color: palegoldenrod;
}
</style>
</head>
<body>
<polymer-flex-layout isContainer>
<div>One</div>
<div class="main" flex>Main</div>
<div>Two</div>
</polymer-flex-layout>
</body>
</html>
Produces a simple, horizontal layout with the middle column “flexed” by the flex attribute:
Changing the layout to vertical alignment seems less easy. I expect that the
flex attribute would expand the middle row to occupy the entire viewport while the other two <polymer-flex-layout> get a single line each. But the following: <polymer-flex-layout isContainer vertical
<div>One</div>
<div class="main" flex>Main</div>
<div>Two</div>
</polymer-flex-layout>
After a bit of experimentation, it seems that, to get the height that I desire, I have to do it myself with CSS:
<head>
<!-- ... -->
<style>
polymer-flex-layout[vertical] {
min-height: 95vh;
}
.main {
background-color: palegoldenrod;
}
</style>
</head>
<body>
<polymer-flex-layout isContainer vertical>
<div>One</div>
<div class="main" flex>Main</div>
<div>Two</div>
</polymer-flex-layout>
</body>flex attribute is working as I expected:
This does seem to have quite the power of the MDN example. For instance, I see no way to rearrange order or change from horizontal to vertical depending on the screen size (at least not without code). Still, this element, and the related
<polymer-layout> element do have some power: <head>
<!-- ... -->
<style>
.container, polymer-flex-layout[vertical] {
min-height: 92vh;
}
.container {
border: 5px dashed orange;
}
.main {
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div class=container>
<polymer-layout vertical></polymer-layout>
<div>One</div>
<div class=main flex>
<polymer-flex-layout vertical=false isContainer>
<div>11111</div>
<div>22222</div>
<div flex align=center>xxxxx</div>
<div>33333</div>
<div>44444</div>
</polymer-flex-layout>
</div>
</div>
<div>Two</div>
</div>
</body>
Both
<polymer-layout> and <polyer-flex-layout> have the feel of something of limited use. Perhaps a quick and easy way to get started with a layout or something along those lines. But they also feel like it would be easy to run into limitations that might necessitate rolling my own. But if I had to roll my own, it is nice having these example handy.Day #969
One thing I kept on meaning to mention, while reading you Blog entries about Polymer Dart, is about using query. Currently it works, but it's deprecated in favour of the new replacement querySelector. I think the query function will be used for something else at some stage in the future.
ReplyDeleteYah, it'll be used for pretty much the same thing so I'm just sticking with the more compact version :)
DeleteThey're planning on following some of the new DOM standards which recently added a query. I think the biggest difference between querySelector (the old query) and the soon-to-be query is that the new one will return a live nodelist, which will be faster and more useful. But in either case, you get a list of nodes so I'm saving a few characters of typing and ignoring the deprecation warnings :)
Fair enough, I was wondering, so thanks for the clarification :-)
Delete