Design Approach
A key set of container box and flex item properties are used to control the responsive behavior of a component. Before we look at those responsive properties, let's take a look at some of the important aspects that need to be kept in mind for responsive behaviors.
Understanding Responsive Behavior
Width and Height
The objective of creating responsive designs, of course, is to create a single layout that should adapt according to different device sizes. That means the width and heights we define for various boxes has to be flexible. Furthermore considering different device sizes, content legibility, reading orders, and common acceptable human interaction, the width of the device is a crucial factor to be considered. That implies that the content needs to be adjusted within the specified width of the device, but to be still legible, the height of the content can grow. It is preferable to have scroll bars on the page, rather than having text which is too small to read (or needs to be 'zoomed' to be legible on the device).
Important points to remember for responsive design:
• All boxes should have flexible width i.e. it should be specified in %
• Their height should be automatic i.e. content will dictate the height of a box
• The width of the box will be dictated by its parent and height will be dictated by its content
A line of text is considered legible if it has between 40 to 75 characters. With 320px as min-width for text content boxes, with font sizes between 10pt to 18pt, it can hold between 38 to 75 characters with the majority of professional fonts with decent character widths, which is ideal for legible and beautiful layouts. And 320px is also considered to be the minimum legible device size width for any smart device.
So for all the content text boxes, make sure to specify default min-width so that content always remains legible even on small devices. That's why all out-of-the-box components in layout blocks palette have min-width defined as min device you would like to support i.e. 320px.
Responsive Properties
Typically it’s the combination of parent container properties and flex item properties of child items that define the responsive behavior of a component.
Container Properties
There are mainly two container properties that can affect the responsive behavior of your layout. But you will find that for most of the use cases need some value for these properties.
Direction  — In most of the cases, the only horizontal direction is sufficient to create a responsive design.
Wrap  ­­— A wrapped container will try to wrap items to the next line; whereas a container without wrap will try to adjust every item in the same row. Most use-cases require wrapping.
All the components of Layout Blocks palette use containers with horizontal direction as we know that’s the main axis that needs to be controlled for responsiveness.  Wrapping for almost all the components defaults to "On".  
Flex Item Properties
The following flex item properties are used to control the responsive behavior of different components:
Width  — width of a flex item can be specified in either flexible units (such as %) or fixed units (such as px).
Height  — height can either be fixed or auto. In most of cases, the height of all the boxes in responsive layouts is set to auto.
Min-max/width  — used to define rule boundaries for width.
Grow/shrink  — This defines the ability for a flex item to grow/shrink if necessary.
With the assumption that container will have horizontal direction and wrapping set, let’s see how can we use different flex item properties to achieve responsiveness.
Width  — Fixed units
When the width of the flex items is specified in fixed units i.e. px, the geometry of items remains same as defined. The container tries to accommodate items with their original width. But if it cannot hold the items, it will readjust the layout by spilling items to a new line.
The container height should be auto.
 Flex Items with fixed width
Note:  If container height is fixed, and it  cannot hold the items, it will still readjust the layout by spilling items to a new line, but now your layout can break.
Container with fixed height having flex Items with fixed width
Width  — Flexible units
When the width of flex items is specified with flexible units i.e. %, the width of the items can change.
Flex Items with flexible width
Note: But there could be some legibility issue with flexible units
All Items should have the height set as auto .
Flex Items with flexible width and legibility issues
Min-width These legibility issues, when specifying flexible units, can be controlled by defining min-width for the flex items
Flex Items with flexible width and legibility issues
Grow Proportional or fixed width can be set for items: but cannot be modified at runtime. Grow allows more space to be dynamically added to flex items, to allow an item to fill remaining available space on a viewer's device.
Based on the flex item’s grow value, the free available space in the container is distributed to the items.
Flex items with grow
Value of grow property  can be between 0 to 100, where 0 means no grow and 100 means distribute 100 fractions of available space to the item.
“Hello” box has 1 grow value, “World” box has 100 grow value and “3” box has no grow or 0 value
Shrink  — It is the opposite of grow, shrink allows items to sacrifice some space to accommodate themselves.
Note: if the container has wrapping on, then shrink works after items are wrapped.
Shrink allows items to shrink even if their width is specified in px. But shrink does not allow item to reduce more than item’s min-width value.
Flex items with shrink
Things to remember about grow & shrink
• Both grow and shrink act on the width of an item — assuming container direction is horizontal
• Width can be either fixed(px) or flexible(%)
• Grow adds available space within the container, to specified widths of items based on grow value.
• Grow honors max-width of the items
• Container wraps layout to satisfy items width rule if the container does not have enough space
• Shrink removes space from default specified width of items if required.
• Shrink honors min-width values specified for an item
Effect of grow & shrink