Flexbox.2 (css master)

flex-box의 룰은 간단하다.

 

1. flexbox는 자식요소와 이야기 하지 않는다.

간단히 말해 내가 움직이길 원하는 박스들이 있다면 그 박스들에 flexbox로 조정을 하는게 아닌

그 박스들을 감싸는 flexbox container box를 만들어서 거기에 flexbox로 이야기 해야한다.

항상 붙어있는 부모 요소가 자식 요소의 위치를 움질일 수 있다는 얘기.

 

2. flexbox는 main-axis와 cross-axis가 있다.

flex-direction : row일때 (default) - 수평축이 main-axis 

main-axis일때 justify-content를 사용하면 box들을 수평축에서 이동이 가능하다.

cross-axis방향으로 box를 이동할 땐 align-items를 사용하면 된다.

 

flex-direction: column일땐  수평축이 cross-axis

수직축이 main-axis로 바뀐다~ 잘 이해하면 된다.

그럼 눈으로 보이는 수직축에서 조절을 해줄때는 반대로 해주면 된다.

column일때 수평축에서 조절하려면 cross-axis니까 align-items를 사용하면 되고 수직에서 옮기려면 justify-content

를 이용하면된다/