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

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

Comments

[Nila]

Nice beginner-friendly explanation of CSS Flexbox! The main axis and cross axis section is especially useful for understanding how flex-direction changes the layout. One small correction: flex-direction: column; . Adding a simple visual example for row vs. column would make these notes even easier for beginners to follow.

[Sathish Kumar]

Thank you so much for the feedback, Nila! I appreciate you pointing out the correction regarding flex-direction: column;. I will definitely include a quick visual/example comparing row vs. column in my next post!