Responsive Design

Introduction to Responsive Design

In 2010, Ethan Marcotte coined the term responsive design in his seminal List Apart article. Since that article, Ethan has written several books about responsive design, including Responsive Web Design in 2011.

The three primary components of responsive design are:

  1. flexible layout
  2. responsive images
  3. media queries

Flexbox

To define an element as a flexbox, apply either of the following display styles

            display: flex;
        or
            display: inline-flex;
        

where a value of flex starts the flexbox on a new line (much as a block element starts on a new line) and a value of inline-flex keeps the flexbox in-line with its surrounding content.

property: flex-direction

values(s):

row (default) = lays out rows left to right

column = creates a vertical layout starting from the top and moving downward

row-reverse, column-reverse = lay out the items bottom-to-top and right-to-left respectively

property: flex-wrap

values(s): nowrap (default), wrap, wrap-reverse

property: flex-flow

Both the flex-direction and flex-wrap properties can be combined into the following flex-flow style

            flex-flow: direction wrap

Flex Items

Flex items behave a lot like floated objects though with several advantages, including that you can float them in either the horizontal or vertical direction and that you can change the order in which they are displayed. While the size of a flex item can be fixed using the CSS width and height properties, they don’t have to be. They can also be “flexed” — automatically adapting their size to fill the flexbox. A flex layout is fundamentally different from a grid layout and requires you to think about sizes and layout in a new way.

Setting the Flex Basis

When items are allowed to “flex” their rendered size is determined by three properties:

  1. the basis size

  2. the growth value

  3. the shrink value

The basis size defines the initial size of the item before the browser attempts to fit it to the flexbox and is set using the following

property: flex-basis

            flex-basis: size;

property: flex-grow

            flex-grow: value;

property: flex-shrink

            flex-shrink: value;

property: flex

            flex: grow shrink basis;
            flex: 0 1 auto;
flex property keywords
auto Use to automatically resize the item from its default size (equivalent to flex: 1 1 auto;)
initial The default value (equivalent to flex: 0 1 auto;)
none Use to create an inflexible item that will not grow or shrink (equivalent to flex: 0 0 auto;)
inherit Use to inherit the flex values of its parent element

Reordering Flex Items

The default ordering value for a flex item is 0. The lower the value the higher the priority.

property: order

            order: value;