axis # 01

Flexbox

With Flexbox, we can create a one-dimensional flexible responsive layout structure easily. Before Flexbox, there were four layout modes...

• Block

• Inline

• Table

• positioned

Axis

Main axis

If flex-flow or flex-direction is a row, then the main axis will be a row.

Again, if flex-flow or flex-direction is a column, then the main axis will be a column.

Cross axis

If flex-flow or flex-direction is a row, then the cross-axis will be a column.

Again, if flex-flow or flex-direction is a column, then the main axis will be a row.

Here, 

justify-content

justify-content only works on the main axis and doesn’t work on the cross-axis. 

align-items

align-items only work on the cross-axis and don’t work on the main axis. 

Next Post