10May2016

Web Development: Flexbox as new UI standard in Web

Layout as a problem

At design point of view, any web site needs some sort of layout. It’s a mandatory Web Development aspect for even very basic HTML content like landing pages. Modern web picture have to be splitted into logical parts in terms of some structure. The problem is the nature of the web. 30 years ago, when the web was actually invented, a page was treated as pure top-to-bottom flow of a text content and images. That was original layout only. A lot of technologies have been applied since that time. E.g., pure HTML tables, floating div elements. Most of them look like hacks. Keep in mind, there were outstanding features and behaviour of specific browsers and their versions. Yes, I’m talking about dark times of IE6. The situation became even worse because we had to support wide range of mobile devices in responsive way. To solve all these problems there are a lot of grid system implementations available as standalone libraries or complete Web Development frameworks. E.g., Bootstrap [http://getbootstrap.com], Foundation [http://foundation.zurb.com].

 Flexbox as a standard solution

Flexbox [https://css-tricks.com/snippets/css/a-guide-to-flexbox/] is not just one more solution, but rather a standard that solve layout problem on basic level. It would be better to have it initially at the beginning of Web Development epoch. W3C is going to add Flexbox to its official standards soon. Technically, it’s not a library but just a set of CSS3 properties to layout DOM elements. There are 3 versions of Flexbox properties set: old, tweener and new. Almost all modern browsers support new version. That means you are free to use Flexbox to implement both intranet web application and public web sites. Most of issues are going from IE side, as usual. Officially, IE supports Flexbox since 10-th version, but there are some issues you have to keep an eye on. Besides, for backward compatibility it would be better to use appropriate prefixes. Best approach here is to write Flexbox properties in new syntax, then run your CSS through Autoprefixer tool [http://css-tricks.com/autoprefixer/].

 Technology

Flexbox works with 2 kinds of DOM elements: container and items. A container holds a set of items. Based on CSS3 properties, Flexbox provides a layout of the items inside the container.

<div class=”container”>
<div>item 1</div>

<div>item 2</div>

</div>

.container {

display: flex;

}
One more important concept is a pair of axis. There are main axis (horizontal by default) and cross axis (vertical by default). Items are distributed at line of those axis. Flexbox is very flexible approach, so, it’s ok to switch axis and directions by flex-direction CSS property. Other properties as used to justify and align items in a container. Besides, there are both horizontal and vertical align. Robust vertical align without hacks looks very cool! Free space may be distribute between items as gaps or like margins around. We can display items in any order and even reverse on the fly. There are a lot of interesting cases [http://callmenick.com/post/flexbox-examples] may be done by Flexbox easily. There are already a lot of web sites use Flexbox in production. One of the best Web Development framework Foundation uses Flexbox for its own grid system implementation in 6-th version. Keep in mind, a grid is not just some layout, but rather a framework with set of ready-to-use features.

 

Read also

Comments are closed.