1.display:flex
display:flex;is used to make an element a flex container.
By default,the flex direction is row.
Example:
.container{
display:flex;
}
2.flex-direction
flex-direction is used to change the direction of flex items.
Example:
.container{
display:flex;
flex-direction:colomn;
}
- Main Axis and Cross Axis: The flex-direction decides the main axis and cross axis. when flex-direction:row a) Main axis : Row(horizontal) b)Cross axis : Column(vertical) when flex-direction:column a) Main axis : Column(vertical) b)Cross axis : Row(horizontal)
Simple Example:
.container{
display:flex;
flex-direction:row;
}
Top comments (0)