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:
- flexible layout
- responsive images
- media queries
To define an element as a flexbox, apply either of the following display styles
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.
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
values(s): nowrap (default), wrap, wrap-reverse
Both the flex-direction and flex-wrap properties can be combined into the following flex-flow style
flex-flow: direction wrap
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:
the basis size
the growth value
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
flex: grow shrink basis;
flex: 0 1 auto;
flex property keywords
||Use to automatically resize the item from its default size (equivalent to flex: 1 1 auto;)
||The default value (equivalent to flex: 0 1 auto;)
|| Use to create an inflexible item that will not grow or shrink (equivalent to flex: 0 0 auto;)
||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.