Table of contents
No headings in the article.
Properties to create flexible and responsive layouts with flexbox :
1.display: flex; Turns your container into flexbox layout mode.
2.flex-direction: Sets the direction of items in container. You can set it to row (default), row-reverse, column, or column-reverse.
3.justify-content:This aligns the flex items along the main axis. You can set it to flex-start (default), flex-end, center, space-between, space-around, or space-evenly.
4.align-items:This aligns the flex items along the cross axis. You can set it to flex-start, flex-end, center, baseline, or stretch (default).
5.flex-wrap:Used to specify whether the flex items should wrap or not. You can set it to nowrap (default), wrap, or wrap-reverse.
6.flex-grow: This property is used to specify how much the flex items should grow if there is extra space. You can set it to a number greater than 0.
7.flex-shrink: This property is used to specify how much the flex items should shrink if there is not enough space. You can set it to a number greater than 0.
8.flex-basis: This property is used to specify the initial size of the flex items before any remaining space is distributed. You can set it to a length value or the keyword auto (default).
9.flex: This property is a shorthand for flex-grow, flex-shrink, and flex-basis.
10.align-self: This property is used to align a single flex item along the cross axis. You can set it to auto (default), flex-start, flex-end, center, baseline, or stretch.