how to use flex property in css code example
Example 1: flex: syntex
flex: none /* value 'none' case */
flex: <'flex-grow'> /* One value syntax, variation 1 */
flex: <'flex-basis'> /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'> /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'> /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'> /* Three values syntax */
flex: inherit
Example 2: css all flex properties
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Example 3: css all flex properties
.container {
display: flex; /* or inline-flex */
}
Example 4: css all flex properties
.item {
order: 5; /* default is 0 */
}
Example 5: flex property in css
The flex property is a shorthand property for:
flex-grow
flex-shrink
flex-basis