This content originally appeared on DEV Community and was authored by Ranjani R
Hello all……today I am going to talk about the master of content alignment in CSS which is Flex. If you ask any web developer today what feature do they use for aligning content, all of them will tell about Display->Flex. In short this is a boon for all developers…it does not have the confusion which exists in absolute and relative positioning as to whether we need to specify top or bottom etc etc.
All we need to do for the flexbox to work is to set the display property to display->flex and set the flex-direction to either row ,row-reverse ,column or column-reverse.
There are mainly two components in flexbox, parent and child. The element which has the display property set as flex is the parent component and the elements inside the parent is the child component. Every parent element in flex gets access to the following properties:
1.Flex-Direction: The flex-direction property specifies the display-direction of flex items in the flex container.
The flex-direction property can have one of the following values, depending on which the flex items are aligned on the main-axis. The default one is row.
row
column
row-reverse
column-reverse
2.Justify-Content:The justify-content property is used to align the flex items when they do not use all available space on the main-axis (horizontally).
The justify-content property can have one of the following values:
center
flex-start
flex-end
space-around
space-between
space-evenly
3.Flex-Wrap:The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.
The flex-wrap property can have one of the following values:
nowrap
wrap
wrap-reverse
4.Align-Items:The align-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).
The align-items property can have one of the following values:
center
flex-start
flex-end
stretch
baseline
normal
I will continue about this in the next post….see you all there..
This content originally appeared on DEV Community and was authored by Ranjani R