css기초:flex-자식박스에 적용하는 속성들 order align-self

display:flex 속성에서 자식 박스에 적용하는 속성들

order
순서 변경 속성

order를 통해 flex안쪽의 자식 요소의 순서를 바꿀 수 있다.
기본값은 0이며, 양수나 음수로 바꿀 수 있다.
작은 수일수록 나열 순서가 앞으로 온다.

 order:2;

align-self
개별 요소 세로 정렬 속성

자식박스를 개별적으로 세로로 정렬할 때 사용하는 속성.
align-items에 적용하는 속성값들을 모두 똑같이 사용함.
값을 지정한 해당 태그에만 적용됨.

align-self : flex-start;
:해당 요소를 컨테이너의 top위치로 정렬한다.(기본값)
align-self : flex-end;
:해당 요소를 컨테이너의 bottom위치로 정렬한다.
align-self : center;
:해당 요소를 컨테이너의 middle위치로 정렬한다.
align-self : baseline;
:해당 요소를 컨테이너의 시작위치로 정렬한다.(=기본값과 결과가 동일)
align-self : stretch;
:해당 요소를 컨테이너에 맞게 늘림.