CSS Flex

In CSS flex is used to create responsive web page design.

Flex container

Properties Values Description
display flex  
flex-direction
  • row
  • row-reverse
  • column
  • column-reverse
 
justify-content
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
 
align-items
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline(item will place like font of items will be align with same base, can be check by providing different font size to the different items)
 

Flex childrens

Property Description  
flex-grow Define how much flex item will grow .itemN{flex-grow:1;}
flex-shrink Define how much flex item will shrink .itemN{flex-shrink:0;}
Note: By default item size will be the same till the space available, as size of screen reduced, the item size will be shrink as much as possible but when we provide shrink to zero it will not be shrink.
order Change order of flex item  
flex-basis Specify initial length of item  
align-self Specify alignment for selected item  
© 2016 - 2022, All Rights are Reserved.