Flexbox provides a more efficient layout even when the size is unknown. You can convert a container to a flex container by applying some css properties. Then this flex container will layout its children.
To create a flex container you need to set the display method of a container to flex or flex-inline. flex is for block elements and flex-inline for inline elements.
Now let’s add the display:flex property to the parent container
flex-flow is a property for the flex containers and specifies how to line up elements, horizontally or vertically, and to wrap or not to wrap the row or column
syntax: flex-flow: DIRECTION WRAP
DIRECTION Values : row | row-reverse | column | column-reverse
WRAP Values: wrap | wrap-reverse
Flex items are the flex container children without position:fixed and position:absolute. There is no need to specify the elements as flex items
flex-grow – determines how much extra space the flex item should get relative to its neighbors
Use the value 0 if you want to prevent the elements to grow.
flex-shrink – determines how much the element will shrink relative to its neighbors. Use the value 0 to prevent the elements to shrink.
flex-basis – specifies the width/height of an element according to flex container’s flow. It provides the starting dimension for the flex-item. row and row-reverse affects the width. column and column-reverse affects the height.
It is recommended to use flex instead flex-grow, flex-shrink and flex-basis. The syntax is:
flex: FLEX-GROW FLEX-SHRINK FLEX-BASIS
- CSS – flexbox and align-self, order
- CSS – flexbox and align-content
- CSS – flexbox and align-items property