So that’s why i am thinking that for direction=column, the cross axis is a vertical line. and since i want to center everything along that vertical line align items=center would do the trick.
Yes. You are correct that the direction changes when you use flex-direction: column. So that means the height and width references are also changed, no? Let’s find out. Open up devtools, if you’re using chrome
right click -> inspect
click arrow icon on top left of the panel
Then you can hover over elements on the page. Check the margins and padding. If you click on an element while this is activated, it will select the dom node in the panel.