dreemgl/docs/api/guides/flexbox_part2/README.js

DreemGL is an open-source multi-screen prototyping framework for mediated environments, with a visual editor and shader styling for webGL and DALi runtimes written in JavaScript. As a toolkit for gpu-accelerated multiscreen development, DreemGL includes

Ext.data.JsonP.flexbox_part2({"guide":"<h1 id='flexbox_part2-section-flexbox-layout-in-dreemgl-part-2'>Flexbox Layout in DreemGL Part 2</h1>\n<div class='toc'>\n<p><strong>Contents</strong></p>\n<ul>\n<li>1. <a href='#!/guide/flexbox_part2-section-container-attributes-%28continued%29'>Container attributes (continued)</a>\n <ul>\n<li>1.1. <a href='#!/guide/flexbox_part2-section-the-alignitems-attribute'>The alignitems attribute</a>\n </li>\n<li>1.2. <a href='#!/guide/flexbox_part2-section-centering-using-flexbox'>Centering using flexbox</a>\n </li>\n</ul></li>\n<li>2. <a href='#!/guide/flexbox_part2-section-child-attributes'>Child attributes</a>\n <ul>\n<li>2.1. <a href='#!/guide/flexbox_part2-section-the-alignself-attribute'>The alignself attribute</a>\n </li>\n<li>2.2. <a href='#!/guide/flexbox_part2-section-the-flex-attribute'>The flex attribute</a>\n </li>\n</ul></li>\n</ul></div>\n\n<h2 id='flexbox_part2-section-container-attributes-%28continued%29'>Container attributes (continued)</h2>\n\n<h3 id='flexbox_part2-section-the-alignitems-attribute'>The alignitems attribute</h3>\n\n<p>The <strong>alignitems</strong> attribute aligns flex items of the current flex line the same way as justifycontent but in the perpendicular direction. The values <strong>flex-start</strong>, <strong>flex-end</strong>, and <strong>center</strong> should be self-explanatory. <strong>stretch</strong> will stretch the width/height of an item along the cross axis.</p>\n\n<p>Check the following example: The flexdirection of the container is set to <strong>row</strong>, and each of the views has a different height. Depending on the <strong>alignitems</strong> value, the views are arranged accordingly. The last row with the <strong>alignitems</strong> value of <strong>stretch</strong> is a special case: For that row there has been no height set for the red and the orange view, therefore the height is stretched to the maximum value.</p>\n\n<p><a href=\"/docs/examples/flexbox/alignitems\" target=\"_blank\">/docs/examples/flexbox/alignitems.js</a></p>\n\n<iframe style=\"width:320px; height:400px; border:0\" src=\"/docs/examples/flexbox/alignitems\"></iframe>\n\n\n<p><br/></p>\n\n<iframe style=\"width:860px; height:400px; border:0\" src=\"/docs/examples/docsourceviewer#file=flexbox/alignitems.js\"></iframe>\n\n\n<h4 id='flexbox_part2-section-changing-container-size-with-alignitems%3D%27stretch%27'>Changing container size with alignitems='stretch'</h4>\n\n<p>When setting <strong>alignitems</strong> to <strong>stretch</strong>, the item width/height will be adjusted when the container size changes along the cross axis. Check the following example, where no height is set on both the red and the blue view. The cross axis is the y-axis. Clicking anywhere into the container area will grow or shrink the height of the container over a duration of 1 second. As you can see, the red and blue view the will grow and shrink with the container along the cross axis.</p>\n\n<p><a href=\"/docs/examples/flexbox/alignitems_animation\" target=\"_blank\">/docs/examples/flexbox/alignitems_animation.js</a></p>\n\n<iframe style=\"width:385px; height:185px; border:0\" src=\"/docs/examples/flexbox/alignitems_animation\"></iframe>\n\n\n<p><br/></p>\n\n<iframe style=\"width:860px; height:400px; border:0\" src=\"/docs/examples/docsourceviewer#file=flexbox/alignitems_animation.js\"></iframe>\n\n\n<h3 id='flexbox_part2-section-centering-using-flexbox'>Centering using flexbox</h3>\n\n<p>To center content with flexbox inside a container, set the <strong>flexdirection</strong> and the <strong>justifycontent</strong> attributes to <strong>center</strong>.</p>\n\n<p><a href=\"/docs/examples/flexbox/flexcentering1\" target=\"_blank\">/docs/examples/flexbox/flexcentering1</a></p>\n\n<iframe style=\"width:200px; height:200px; border:0\" src=\"/docs/examples/flexbox/flexcentering1\"></iframe>\n\n\n\n\n<iframe style=\"width:656px; height:200px; border:0\" src=\"/docs/examples/docsourceviewer#file=flexbox/flexcentering1.js\"></iframe>\n\n\n<h2 id='flexbox_part2-section-child-attributes'>Child attributes</h2>\n\n<p>Only two attributes can be set on the child directly to influence the layout of that specific item. <strong>flex</strong> and <strong>alignself</strong></p>\n\n<h3 id='flexbox_part2-section-the-alignself-attribute'>The alignself attribute</h3>\n\n<p><strong>alignself</strong> makes it possible to override the align-items value for specific flex items. The align-self attribute accepts the same 5 values as the align-items:</p>\n\n<ul>\n<li><strong>flex-start</strong> cross-start margin edge of the item is placed on the cross-start line</li>\n<li><strong>flex-end</strong> cross-end margin edge of the item is placed on the cross-end line</li>\n<li><strong>center</strong> item is centered in the cross-axis</li>\n<li><strong>stretch</strong> (default) stretch to fill the container (still respect min-width/max-width)</li>\n</ul>\n\n\n<p>Take a look at the following example. The top row of items uses <strong>alignitems='center'</strong> with a <strong>flexdirection='row'</strong> setting. Therefore all views are center along x-axis. For the bottom row, all children override the container alignment along the main axis by using a different <strong>alignself</strong> value.</p>\n\n<p><a href=\"/docs/examples/flexbox/alignself\" target=\"_blank\">/docs/examples/flexbox/alignself.js</a></p>\n\n<iframe style=\"width:320px; height:310px; border:0\" src=\"/docs/examples/flexbox/alignself\"></iframe>\n\n\n\n\n<iframe style=\"width:860px; height:400px; border:0\" src=\"/docs/examples/docsourceviewer#file=flexbox/alignself.js\"></iframe>\n\n\n<h3 id='flexbox_part2-section-the-flex-attribute'>The flex attribute</h3>\n\n<p>The value of the <strong>flex</strong> property specifies the ratio at which it grows relative to its siblings. To fill to the maximum available space, you should use a value of 1. For proportional scaling relative to siblings, you can use any number relative to another child's flex value.</p>\n\n<p>The following example will make things clearer: For all rows, the <strong>flexdirection='row'</strong> and <strong>alignitems='stretch</strong>. Let's go through all rows:</p>\n\n<ul>\n<li>Row #1: Red view has width specified using <strong>flex=.5</strong>, green view uses a value of <strong>flex=1</strong>. The green view is two times as wide as the red view.</li>\n<li>Row #2: The red and orange view have a fixed width <strong>w=80</strong>. The green view uses a <strong>flex=1</strong> value to fill the space.</li>\n<li>Row #3: All four views have a <strong>flex=.25</strong> value, so are all equally wide.</li>\n</ul>\n\n\n<p>Clicking into the container will animate the width (shrinking and growing). You can see that for the middle row the red and orange view maintain a width of 80, only the green view will adapt to the new space available.</p>\n\n<p><a href=\"/docs/examples/flexbox/childflex\" target=\"_blank\">/docs/examples/flexbox/childflex.js</a></p>\n\n<iframe style=\"width:860px; height:200px; border:0\" src=\"/docs/examples/flexbox/childflex\"></iframe>\n\n\n\n\n<iframe style=\"width:860px; height:400px; border:0\" src=\"/docs/examples/docsourceviewer#file=flexbox/childflex.js\"></iframe>\n\n","title":"Flexbox Layout in DreemGL Part 2"});