UI Development, Uncategorized

Responsive Web Design Using Flexbox

In CSS float and clear are used much to place an element or an image inside its container and other elements wrap around it. But going through it is also still limited and doesn’t work enough. To over come these circumstances one solution is Flex box layout Module commonly called as flexbox. It is a recommendation in CSS3 that enables designers to control the arrangement of elements on a page with more finesse than common css which we are using earlier.

Bleeding edge CSS:

At the time of this implementation, support for Flexbox is limited. Chrome recognizes its CSS properties using -webkit prefix. Other Webkit browsers like Mobile Safari and Android Browser, have limited support. Internet Explorer supports Flexbox as of version 10. Since last few years they are many new changes in the browsers versions and how it develops, flexbox became a relevant redesign tool which helps in achieving responsive design. Below are some of the major points regarding the usage of flexbox.

Containers:

A Flexbox layout creates a relationship between its containing element — a div, as an example — and also the items that hold with within the container. At its most fundamental, flexbox arranges its items in a very line that points in any cardinal direction without changing the HTML.

For example:

In the above three items in a flexbox can be arranged from first to last or vice-versa, horizontally or vertically using flex-direction property of a container. We can re-arrange the elements inside the web page with out changing the HTML. This alone is a boon to responsive design.

While display: block helps to stack the elements vertically and display: inline keeps elements in the same line of wrapping text, display: flex puts the designer in charge of direction, order, alignment and spacing.  Flexbox layout applies to any list of items, from lists to layout. Its potential includes:

1) Rearrangement of columns, headers, footers or sidebars on the fly

2) Automatically even navigation spacing

3) More layout in CSS means less in HTML

4) Given random items in a series, move everything with important to the top of a display

Note: Flexbox effects visual styles, but rearranging the order of elements on screen will not affect their order with any      Javascript frameworks.

Alignment:

In addition to direction items can be pushed to start, center and end of the container and it also helps in spacing evenly in between and around  the containers edges. The css property justify-content helps in controlling the alignment between its “start” and “end“.

In above scenario the implied line on which all these items are arranged is called the “main axis.” The example here nudges navigation links along the main axis, indicated with a black line, automatically changing space as needed. Main axis has a direction flow either horizantally or  vertically.

The first four examples “flex-start” helps in pushing items to left, center to center and “flex-end” to right. In addition to this “row-reverse” helps in pushing the items to right.

Wrapping:

When a series of Flexbox items reach the tip of their container, they’ll either extend beyond the container or fit onto the subsequent “line” within the container, very like traditional inline elements.

The properties above apply to the container. Others apply to each item.

Flex-Grow:

Flex grow is sub-poperty that is present in Flexbox layout Module. It defines the ability of growing the flex-items when needed.It accepts a unit value of “n” that serves as a proportion. It helps in dictating what amount of the available space present inside the flex container the flex-item should take up.

If  flex-grow:0  — The element will not grow if there’s space available. It will only use the space it needs.

If flex-grow:1   — The element will grow by a part of 1. it will replenish the remaining space if no other flexbox item has a flex-grow value

If flex-grow value is greater than 1 then its  behaviour depends on the value of the flexbox item siblings.

Order:

The last major sub-property (relevant to responsive design) controls the precise order in which elements appear is called order.

By default, every item in a very flexbox container has order:0. Setting an item to order:1 pushes it further down the most axis. Setting an item’s order to but zero, such as order:-1, pushes it up the most axis. This property are often used to change this ordering. By using this property we will align items inside the flexbox layout module in any order with out changing the html.

In this way flexbox helps to distribute or align elements with in a container of flexible widths and heights.

About The Author