Website layouts with CSS Flexbox

CSS Flex Box layout is a new specification/layout model from W3C, the standards organization for the World Wide Web.

The main purpose of CSS Flex Box layouts is to provide a simpler means to dynamically resize 'content boxes' on webpages depending on available screen-space, size and resolution. 'Content boxes' typically contain distinct columns of text, images, forms, charts, navigation elements. The layout system thus provides a new means to approach Responsive website design

Flex boxes consist of a Flex Container which contains Flex items. Flex Boxes have two axes the main axis (typicaly left-to right or top to bottom) and a cross-axis which is perpendicular to the main axis.

Within a Flex Box framework, the flex items can be controlled in terms of direction, alignment, order and wrap .

Illustration showing flex grid layout

The following webpages provide in-depth information on how to use Flex Box:

About Grid layouts and ratios:

Recent blog posts