HP webOS Developer Blog

I’d like to talk about the fundamental concept of CSS 3 Flexible Box Models and how you can take advantage of it as you create the interface using the Enyo framework. In addition, I’d also recommend checking out one of our previous posts, “Getting Familiar with the Flexible Box Layout Model.”

CSS 3 Flexible Box Model (“Flexbox”)

The flexbox model is a new box model introduced in CSS 3. The flexbox model determines how the children of a box are laid out either horizontally or vertically, and determine how to share the available space.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

If you switch the value for box-orient (with the Webkit extension, -webkit-box-orient) to vertical, the children boxes are displayed vertically.

A box is not flexible by default, and it is flexible only when the property box-flex has a defined value and the property defines its flexibility ratio relative to the siblings. The box-flex is similar to percent sizing, except that the calculations are based on available space (not total space).

Let’s try the last box to be flexible, which takes up all the available space:

.container > div:last-child {
  -webkit-box-flex: 1;
}

To align a horizontally oriented boxes, use box-pack to distribute space in horizontal axis (in the same direction to the orient), and box-align for vertical axis (in the opposite direction to the orient).
By giving the value center to both properties, the children align up in the center of each box vertically and horizontally:

.container {
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

Enyo Flex Layouts

Enyo’s flex layouts are based on the CSS3 Flexible Box Model.
In Enyo, the Control object may use Layout objects to enhance the rendering of their child controls. You can lay the objects out by specifying a value of the layoutKind property.
The VFlexBox and HFlexBox kinds are simply controls that have layoutKind set by default (layoutKind: enyo.VFlexLayout and layoutKind: enyo.HFlexLayout, respectively).

So creating the same example with horizontally aligned boxes (well, let’s make it with Enyo buttons!) can easily be created with Enyo as follows:

{name: "container", kind: "HFlexBox", components:[
  {kind: "Button", caption: "1"},
  {kind: "Button", caption: "2"},
  {kind: "Button", caption: "3"},
]}

If want the 3rd box to be flexible, you can simply give the property, flex the value 1.

{kind: "Button", caption: "3", flex: 1}

Creating App UI with Enyo FlexBox

Here are some more practical examples you might find useful in your own applications.

This basic user-interface is created with enyo.VFlexBox. And the entire UI code is shown below.

enyo.kind({
  name: "Main",
  kind: "VFlexBox",
  components: [
    {kind: "PageHeader", content: "FlexBox is awesome!", style: "text-transform: capitalize"},
      {kind: "VirtualList", flex: 1},
      {kind: "Toolbar"}
  ],

  create: function() {
    this.inherited(arguments);
  }
});

Notice that the container itself is the enyo.VFlexBox kind, and the object in the middle (where the enyo.VirtualList is) has the flex property value that tells the layout to take up the all available space. If you do not specify the value, the middle section and the footer section (enyo.Toolbar) flow just like the regular box model – the footer is rendered just below where the middle section content ends (which is empty, in this case), instead of staying at the very bottom of the screen.

The flex layout can be applied anywhere else in your UI components. Let’s say you have some list items within the VirtualList and each item is composed with an avatar picture at the left, and two lines of a person’s info at the right side. You can achieve the layout using:

...
{kind: "VirtualList", flex: 1, onSetupRow: "setupRow", components:[
  {kind: "Item", layoutKind: "HFlexLayout", components: [
    {kind: "Image", className: "avatar"},
    {kind: "VFlexBox", pack: "center", flex: 1, components: [
      {name: "fullName"},
      {name: "jobTitle", className: "enyo-item-secondary"}
    ]}
]},
...

See how the horizontal and vertical flex layout are nested, and how the flex and pack properties are used.

Performance Considerations

You should be aware that while the flexible box model is very convenient, it should not be applied unnecessarily. When flexible boxes are nested inside more flexible boxes, the time it takes to render goes up exponentially. Luckily this penalty is small enough to be negligible for a few levels of nesting, but after three layers of nested flexible boxes you will start seeing your application slow down when rendering. In these instances, try to evaluate if all your flexible boxes are absolutely necessary, or if simpler CSS attributes such as “width: 25%” would meet your goals.

Conclusion

The flexbox model layout is pretty simple and easy to architect your app UI and create components, especially with Enyo. For more information of the original specs of the CSS3 flexbox model that the current WebKit supports, see W3C spec page.

Happy coding!