Flexbox

• Flexbox means flexible box. It helps us to achieve layouts in a unidirectional flow (1D) which can either be row or column at a time.

• Play flexbox froggy game from here

Container Properties

• display: flex

• It activates two axes: main (X default) and cross (Y default)

• flex-direction: row/column/row-reverse/column-reverse.

• Axes flips on changing the direction. Meaning that on flex-direction: column, the cross axis becomes the main one and vice-versa

• flex-wrap: wrap/nowrap/wrap-reverse Which prevents shrinking of items and moves them in a new row

• justify-content for main axis and align-items for cross axis: start, end, center, space-between/around/evenly

• align-items: stretch; is the default

• align-content to control spacing between multiple rows

• gap: to create gap between elements

• flex-flow: direction wrap; (Shorthand property)

Item Properties (Applied directly on flex item)

• justify/align-self to control individual element

• flex-shrink: 1; (default)

• flex-grow: 0;

• flex-basis: auto; (Used to give width to flex items)

• flex: grow shrink basis; (Shorthand property)

• order: 0; to control the order of flex items which is default 0. -1 will come at left and positive will come at end.