Comic Director - Flex Your Layout Skills with CSS3’s Flexbox

During the early days of computing, where users viewed web pages and applications primarily on desktop systems, developers had to build complex design layouts with HTML tables, JavaScript, and CSS floats. The way people view the web has evolved, and as tablet and mobile device use grows, so does the need for new design techniques and tools that allow developers to create the perfect web and application viewing experience on any device. And with the combination of HTML5 and new JavaScript APIs, developers can produce truly dynamic and highly engaging web and app experiences.

This lesson is an introduction to a new display type in CSS3 called Flexbox, which lets you create responsive application and web page layouts that adapt to various device sizes without the use of performance draining JavaScript.

Comic Director App – The Hub Comic Director App – Create a Comic View

Flexbox Overview

Flexbox made an early appearance back in 2009. At that time, it was a JavaScript based polyfill called “Flexie” and it allowed developers to create fluid and flexible containers for the first time across many browsers. There have been minor syntax adjustments since then, with many browsers that still support the old syntax, although it is anticipated that browsers will eventually drop support for the old syntax in favor of the new.

For the latest status on the browser support for Flexbox, see http://caniuse.com/#search=flexbox.

Old Flexbox

New Flexbox

.grid {
display: box;
}
.column {
padding: 20px;
}
.fluid {
box-flex: 1;
background: #ccc;
}
.fixed {
width: 400px;
background: red;
}

.grid {
display: flex;
}
.col {
                background: #ccc;
              padding: 30px;
}
.fluid {
                flex: 1;
}
.fixed {
                background: red;
  width: 400px;
}

Flexbox as it exists today allows you to build a “parent flex container” and add sub containers inside called “flex items” or “children” that dynamically adjust size by equally or proportionally distributing unused space. This ensures that the spacing of your design elements remain intact no matter what device is used to view the application.

Flexbox Terminology

Flexbox also allows you to quickly drop images or copy blocks into flex containers so that the sizing and spacing of all of the elements are handled by Flexbox. This cuts down on code and makes sure all the elements fit appropriately within the application and scroll as expected, all without having to explicitly define heights, widths, or padding. The Comic Director application uses a similar Flexbox technique for the clip art bar in the Create a Comic view as seen below.

Comic Director uses Flexbox containers to evenly position place graphic elements without a lot of code.

Horizontal Layouts

Looking at the code example below, the parent flex container gets defined by the flex-flow value of the display property. By default, the children containers will layout horizontally, or you can use the row property to add more description in the code. The advantages of laying out elements in a horizontal Flexbox container versus a table are that you can evenly position elements within that container, and the elements will fill unused space as an application or browser window expands and shrinks.

.flexbox { display:flex;
flex-flow:row; }
 

Vertical Layouts

To lay out flex items vertically in a column, the flex-flow property is used and then defined with the column value. This layout type is particularly useful when designing layouts for smaller devices such as mobile phones or tablets because it allows you to stack elements on top of each other, making it easier for users to see all the application content within the width of the device’s screen.

.flexbox { display:flex;
flex-flow:column; }
 

Fluid Containers

The flex layout can be further defined using the flex-grow property. Children with a flex-grow property value of 1 will take up an equal amount of unused space and therefore equal in size. A child with a flex-grow value of 2 will take up twice as much space as a child with a flex-grow property value of 1. A child with a flex-grow property value of 3 will take up three times more space as a flex-grow:1 child and so on. These flex layouts provide the ability to dynamically adjust an items width and height to best fill the available space for any device type and size. Items will expand to fill free space as needed and decrease in size to prevent content from being obscured or displayed beyond the devices viewable area.

.flex1 { flex-grow:1; }
.flex2 { flex-grow:2; }
.flex3 { flex-grow:3; }

Example of the flex-grow property

Orderable Layouts

Horizontal and vertical layouts are great when elements need only to reduce in size, but when your layout needs to stack elements vertically for example, that’s when orderable layouts can be useful. This allows you to plan how graphic elements and objects within your app will be positioned, letting you optimize the viewing experience on various screen sizes. While possible during earlier web development days, creating a fluid, responsive design required use of performance taxing JavaScript, and more of a developer’s time to properly design it. Flexbox was introduced as a way to solve these problems.

Orderable layouts allow you to design your application layout with desktop and mobile in mind.

To start you will need to create a parent container by assigning a flex-grow value in the display property. A media query is used to detect when the application window height is greater than the width. This is done by defining portrait as the value for the orientation property. When that media query condition has been met, you can use CSS to define what the new layout should look like. In the example below, the column value of the flex-flow property will order the flex items vertically when the height of the application window is larger than the width. The process of combining media queries with CSS can be repeated in order to extend the layout predictability and fluidness across multiple display devices.

flexbox {
  display:flex;
flex-flow: row;
}
article > section  { order:1; }
article > aside       { order:2; }
 
@media (orientation:portrait)
{
  .flexbox { flex-flow:column; }
  .flex1 { order:2; }
  .flex3 { order:1; }
}

Most designers and developers will agree that the current Flexbox module is much easier to use. It has:

  • Eliminated the need for JavaScript-based responsive designs, which also improves application performance
  • Allows you to build predictable and fluid application layouts for multiple device sizes

Learn more about web application development at the Intel® Developer Zone. Check out the new Intel® HTML5 Development Environment and look at code examples at the Intel® HTML5 Playground.

Intel® HTML5 Development Environment:

The Intel® XDK is an HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC platforms.

software.intel.com/html5tools

Intel® HTML5 Playground:

The Intel HTML5 Playground provides you with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points. Anything you that you create, can be shared using a permalink.

software.intel.com/appup/html5-playground

Einzelheiten zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.