Latest Development in CSS3

CSS3 latest tool Flexible Box

Over the years CSS programmers are working hard for development of such tools which improve the capabilities of CSS

Today we have layout tools like float, positioning, margins and paddings but lets acknowledge it they work fine in static websites but when you are developing a dynamic website it is difficult to handle layout through these tools. So CSS3 is now offering new tool which is "Flexible Box".

What "Flexible Box" can do, can be done recently by float, positioning and margins but flexible box make the job very easy. The Biggest drawback is browser support Firefox, Chrome, Safari and Webkit browsers support the flexible box right now but IE does not support including IE9. Good news is that IE 10PP support flexible box.

You should know that its spec is changing The latest W3C working draft and editor’s draft use different terminology than what currently works in practice. I’ll stick with the terminology that currently works and make note of the corresponding terms in the latest specs

Html

                                    

CSS

                                    #flexbox{
                                        display:-moz-box;     /* For Mozilla Firefox */
                                        display:-webkit-box;  /* For Webkit Browsers */  
                                        display:box;          /* For Internet Explorer 10 */  
                                    }
                                

box-direction

box-orient sets the direction in which flexbox items will be laid out inside the flexbox and has several allowable values

  • horizontal — Lay out children from left to right in a horizontal line
  • vertical — Lay out children from top to bottom vertically
  • inline-axis — Lay out children along the inline axis (map to horizontal)
  • block-axis — Lay out children along the block axis (map to vertical)
  • inherit — The value will be inherited from the parent element

flex-direction will have the associated values lr, rl, tb, bt, inline, inline-reverse, block, and block-reverse. lr stands for left to right and tb stands for top to bottom.

flex-pack and flex-align

Previously one property we can use is box-pack(Currently flex-pak), which has associated values of start, end, center, and justify.

Start and end can ultimately be any of the 4 box sides depending on whether your flexbox is horizontal or vertical and which direction it’s items are laid out in.

Another property for dealing with extra space is the box-align property (Currently flex-align). It’s values are start, end, center, and stretch, which work similarly to the same values for box-pack.

A new value here is baseline which says to set each flexbox item so their baselines align and then distribute the space above and below. The baseline can be either horizontal or vertical depending on the direction of the flexbox.

                                    #flexbox{
                                        flex-pack: center;   /*Previously Known as box-pack*/
                                        flex-align: center;  /*Previously Known as box-align*/
                                        box-direction: horizontal;
                                    }
                                

box-lines or flex-flow

The box-lines property sets how the box handles content that overflows it’s size and has the associated values single and multiple.

  • single — All child elements will be placed in a single row or column (elements that do not fit will simply be considered overflow)
  • multiple — The box is allowed to expand to multiple lines, to accommodate all of its children

Note:box-lines aren’t mentioned in the most recent spec, but the editors draft refers to flex-flow, which looks to mimic box-lines. I also haven’t been able to get box-lines working in any browser I’ve tested in.

box-ordinal-group

box-ordinal-group controls the order in which the flex-items are displayed within the flexbox. The values of the box-ordinal-group property are integers.

                                    #flexbox-item1{
                                        box-ordinal-group: 2;
                                    }
                                    #flexbox-item3{
                                        box-ordinal-group: 1;
                                    }
                                

box-flex / flex

box-flex sets whether or not the child items are inflexible or flexible and in the case of the latter, how. It tells the flexbox and flexbox items what to do with the extra space.

It’s values should be seen as fractions. An element with a box-flex of 2 would get twice the extra space as an element with a box-flex of 1.

                                    #flexbox-item1{width:150px; box-flex: 1}
                                    #flexbox-item2{width:150px; box-flex: 13}
                                    #flexbox-item3{width:150px; box-flex: 1}
                                

Again we have 150px of extra space inside the box. Here we’ve set box-flex values of 1, 13, and 1 respectively on our flexbox items. The center flexbox item will receive an additional 130px of the extra space and the other items will each receive 10px of the additional space.

Note: The latest working draft makes no mention of box-flex or box-flex group. Both seem to be absorbed into the flex() function, though the syntax of flex() is still under discussion.


Copyright © 2011-2014 King of Developers. All Rights Reserved.
Designed By: Abdul Rehman