Introduction to CSS Flexible Box Layout

In an earlier article

https://www.htmlgoodies.com/css/working-with-css-box-model-in-your-web-apps-part-1/

, we learned about block-level box layout, line box layout and inline-level box layout.

In this article, we will explore another type – flexible box layout.

Quoting the CSS3 specification for flexible box layout,

Source: http://www.w3.org/TR/css3-flexbox/

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

 

This implies that unlike the earlier box layouts, there is more flexibility with this layout w.r.t horizontal and vertical alignment.

Here are a few characteristics of flexible box layout.

• They can flow in any direction – left, right, down or even upwards
• Display order can be reversed or rearranged
• They can be laid out linearly along a single axis
• They can be wrapped into multiple lines along a secondary axis.
• They can be sized according to available space
• They support alignment to their container element or with each other
• They can be collapsed keeping relative cross size.

Properties

display

The display property now supports new value corresponding to flex.

When ‘display’ is set to ‘flex’, it cases an element to generate a block-level flex container box.

When ‘display’ is set to ‘inline-flex’, it cases an element to generate an inline-level flex container box.

flex-direction

This propery specifies how flex items are placed in a flex container. The valid values are “row”, “row-reverse”, “column”, and “column-reverse”.

Value of “row” implies that flex-container’s main axis has the same orientation as the inline axis.

Value of “row-reverse” implies the same as “row”, except the “main-start” and “main-end” directions are opposite.

Value of “column” implies that flex-container’s main axis has the same orientation as the block axis.

Value of “column-reverse” implies the same as “column”, except the “main-start” and “main-end” directions are opposite.

 

flex-wrap

This property contains whether the flex container is single-line or multi-line. The acceptable values are “nowrap”, “wrap”, and “wrap-reverse”.

 

flex-flow

This property defines the flex container’s main and cross axes.

The acceptable values are ” flex-direction” and “flex-wrap”.

 

flex

This property specifies the components of flexible length. The acceptable values for this property are “none”,  “flex-grow”, “flex-shrink”, and “flex-basics”.

 

 

Here are some differences between a flex container and a block container.

–          Any “column-*” properties are ignored.

–          “float” and “clear” properties have no effect.

–          “vertical-align” property has no effect.

 

Here is an example declaration of a flexible box layout.

 

<style>

#myId {

display: flex;

flex-flow : column;

}

</style>

 

As we can see, flexible box layout removes the rigidity of element layout in the box layout model. I hope you have found this information useful.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com