Design Approach
Now that we have established some common components that are required to achieve effective responsive design, it is time to understand the properties and rules available to control the responsive behavior, and how to use them to create an effective responsive design.
Flex Rules (Properties)
Flex properties are divided into two categories:
1. Container Box Properties – properties that can only be applied onto container boxes
2. Flex Item Properties – can be applied to any child box, that is contained within a container. Children of a container are also referred to as "flex items". Children of a container are also referred to as flex items.
The combination of parent container properties, and properties of contained flex items allow us to control the layout and responsiveness of a component.
Because Container box is rule-based layout construct, item layout within this container can only be controlled by defining various properties, and based on those properties it will control the layout-ing of child items.
Container/flexbox is a uni-directional layout tool. Uni-directional layout-ing is like laying-out flex items either in the horizontal or vertical direction.
Flex with the horizontal direction
Flex with the vertical direction
Direction
All container boxes have as a direction defined, the default direction for a container is horizontal, but can be changed from measurement palette to vertical if required. Think of direction as a way of laying out flex items either in horizontal rows or vertical columns.
Wrap
When some items are put into a container box, the items will all try to fit onto one line. But by turning on wrapping for the container layout, items can be allowed to wrap onto the next line. By default, all the containers, rows, and columns have wrapping property set.
Flex without Wrap
Flex with Wrap
Justification
This defines the alignment along the directional axis of a container.
Alignment
This defines the default behavior for how flex items are laid out along the non-directional axis on the current line. Think of it as the Justification version for the cross-axis
Row Alignment
Unlike alignment, which controls the alignment of items within lines of a container, row-alignment is to control the alignment of lines itself in the container. Row alignment works only when the wrap is On.
Justification, Alignment, and Row Alignment properties
Effect of Wrap on alignment
When the wrap is off for a container, then alignment property is used to control cross axis-alignment of flex items. But if the wrap is on, the row-alignment property is used to control the alignment of items, and alignment is used to control the alignment of flex items within a single line in case there are multiple lines in a wrapped container.
Alignment without wrapping set is being controlled by alignment property
Alignment with wrapping set is controlled by row-alignment property
Padding
Container boxes can also have padding or insets. Padding is an important property used not only for negative space but an effective tool to help align different content boxes in a responsive layout.
Background Fill
Allow background image for the container.
Parallax Effect
Applies a parallax effect on the background image
Left & Top
Unlike X and Y, which represent item position relative to the page, left and top is offsets of an item from its natural position within a container. The natural position of the item is calculated by container-based on other rules applied to it.
Width & Height
All the elements should have their width set in %.
Min-max/width-height
typically used to define rule boundaries for width and height.
Margins
Unlike padding, which can only be applied on a container, margins can be applied on any flex items. Margins are outsets rather than insets.
Grow
This defines the ability for a flex item to grow, if necessary. It accepts a unit-less value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If grow is set to 1 for child items, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
Shrink
This defines the ability for a flex item to shrink if necessary. It accepts a unit-less value that serves as a proportion.
Alignment
Flex items can have their alignment property defined, which will override the general value defined for all the items in a container.