Flexbox

Container/Item (Flexbox)

When the correct display/flexbox properties are applied to the parent/container the properties are inherited by the items/children.

Cross & Main axis

The cross axis runs top to bottom and the main axis runs left to right. Both of these values are changed/rotated when “flex-direction” is applied.

display: flex; (or inline)

is block the default parameter on will not be inline unless specified.

Container/Parent Properties

Display properties for the container/parent:

justify-content:

flex-end;

items are packed toward the end line

flex-start; (default)

items are packed towards the start line

center;

items are centered along the line

space-between;

items are distributed so that spacing between any two items is equal.

space-around;

items are evenly distributed in the line with equal space around.

align-items:

stretch: (default)

stretch to fill container with respect to min-width/max-width

flex-end:

cross-end margin edge of the items is placed on the cross-end line

flex-start;

cross-start margin edge of the items is placed on the cross-start line

center;

items are centered in the cross-axis

baseline;

items are aligned such as their baselines align

align-content:

stretch: (default)

lines stretch to take up the remaining space

flex-end;

lines packed to the end of the container

flex-start;

lines packed to the start of the container

center;

lines packed to the center of the container

space-between;

lines evenly distributed; the first line is at the start of the container while the last one is at the end

space-around;

lines evenly distributed with equal space around each line

flex-direction: row (default) | column

established the main axis and thus defines the direction.

flex-wrap: nowrap

(default - all items will be put on one line | wrap - will wrap elements onto multiple lines from top to bottom.

flex-flow:

shorthand for combining flex-direction and flex-wrap

Item/Children Properties

Flex properties for the item’s/children:

order:

(default is 0) an integer to represent the order in which flex container items appear

flex-grow

It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.If all items have “flex-grow” set to 1, 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).

flex-shrink

This defines the ability for a flex item to shrink if necessary.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The “auto” keyword means "look at my width or height property". If set to 0, the extra space around content isn't factored in. If set to “auto” the extra space is distributed based on its “flex-grow” value.

flex:

shorthand for flex-grow, and flex-shrink/basis combined (flex-shrink/basis are the second and third optional parameters.