15. Flexbox : CSS

Flexbox

The Flexbox Module was planned as a one-dimensional design model, and as a technique that could offer space distribution between things in an interface with incredible arrangement abilities.

• display: flex; - Initialize the holder as a flexbox.

Flex properties for a flex container -

• flex-direction: row; (Default worth of flex-direction is row)
• flex-direction: column;
• flex-direction: row-reverse;
• flex-direction: column-reverse;
• flex-wrap: wrap; (Default worth of flex-wrap is no-wrap)
• flex-wrap: wrap-reverse;

This is a shorthand for flex-direction: and flex-wrap: -

• flex-flow: row-reverse wrap;

Justify-content will justify the substance flat way -

• justify-content: center;
• justify-content: space-between;
• justify-content: space-uniformly;
• justify-content: space-around;

Align-items things will legitimize the substance vertical way -

• align-items: center;
• align-items: flex-end;
• align-items: flex-start;
• align-items: stretch;

Flex properties for a flex thing

• order: ; (Higher the order, later it appears in the slot)
• flex-grow;
• flex-shrink;
• flex-basis; (at the point when flex-direction is set to row flex-basis: will control the width at the point when flex-direction is set to section flex-basis: will control the height)