DEV Community

Sathish Kumar
Sathish Kumar

Posted on

CSS Flexbox-Basic Notes:

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;
}

  1. 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)