Flexbox .3 (align-self and order)

부모는 어떤 방식으로 자식을 위치 시키는가

flex박스에서 자식요소들에 위치를 시킬땐 분명 부모요소에 명령을 줬다

그런데 자식요소에게 명령을 줄 수 있는 property가 있다 

바로 align-self와 order이다.

 

align-self는 align-items와 비슷한 일을 하는데 이는 cross axis에 관한 내용이다

하지만 align-items와는 다르게 한 box에만 해당한다.

예를들어 박스 세개를 설정하고 flex시켜준 뒤 하나만 화면 세로 중앙에 배치하고 싶으면

align-self를 이용해서 center로 지정해주면 된다. *단 기본적으로 부모 요소 박스는 자식요소 박스의 height와 같다

따로 부모요소의 height를 꼭 지정해줘야 뷰포트 상에 세로 위치를 변경할 수 있다.

 

그리고 order를 알아보자. order는 박스들의 순서를 바꿀 수 있다. 만약 html상에서 순서를 바꾸기 힘들다면

css에서 order속성을 통해 순서를 배치 할 수 있다.

두번째 박스에 order를 1로 값을 줘보자 어떻게 변경되는지..

?! 2번이 마지막 박스가 되어 있다...무슨 일일까...

1과 3이 앞으로 왔다.

기본적으로 박스요소의 order값은 0이다. 전부다 0이었다.

그런데 2번박스를 order:1로 바꾸었으니 순서상 0,0,1이 되어서 마지막으로 가게된다.