CSS Flexbox align-items and justify-content

Question

For CSS Flexbox layouts, I have been given to understand that we have align-items property to align our item on the cross axis, while we use justify-content to align the item on the main axis.

Now does the above statement applicable only with the default flex-direction i.e. row

Does it change when we use flex-direction as column.

So essentially, I am confused with how the behavior of align-items and justify-content when we have flex-direction as column ?

Example

On following link https://jsbin.com/wakagup/edit?html,output

.box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

If we change align-items from flex-start to flex-end, the divs seem to move horizontally rather than vertically which is what is confusing me.

Also, the divs move differently when we remove flex-direction: column; and try different values for the align-items/justify-content

Some [ressources](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) that can help — lupaulus, May 02 '20 at 07:49
Add that example to directly in your post, as a snippet. Don't force people to leave the site! — connexo, May 02 '20 at 08:29
consider the duplicate question and also follow the different links provided there, you will understand everything about flexbox — Temani Afif, May 02 '20 at 11:23

score 0 · Answer 1 · answered May 02 '20 at 07:57

0

When the direction is inverted the axis inverts thus the opposite behavior.

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). - MDN

answered May 02 '20 at 07:57

Sai Krishna

597
4
16

CSS Flexbox align-items and justify-content

1 Answers1