본문 바로가기
html, 스타일시트(css, scss)

[html/css] 박스의 위치를 바꾸는 속성 Order, Align-self

by yerica 2024. 6. 10.

반응형을 만들때 순서를 바꿔가며 만들고 싶을 때가 있다.

그때 사용하는 속성으로, 반드시 자식박스에 적용하는 속성들이다.

이 속성들도 부모박스에 flex가 적용되어 있어야만 사용할 수 있다.



순서를 변경하는 속성
order


 

order를 통해 flex 안쪽의 자식 요소의 순서를 바꿀 수 있다.

기본값은 0으로 지정되어 있으며, 양수나 음수로 바꿀 수 있다.

적은 수 일수록 나열 순서가 앞으로 온다.

<기본값>
속성명{order: 속성값;}

 

예시로 box1~3을 감싸는 container를 반들어 보았다.

부모박스 container에 flex 속성을 준 뒤 자식박스에 order를 적용해 보면 변화를 관찰하겠다.

 

box1에 order 값 5를 주었다.

현재 box2와 box3는 기본값으로 0을 가지고 있기 때문에, box1이 가장 우측으로 이동하는 것을 확인할 수있다.

 

이후 box3에 order 값 -3을 주었다.

box1은 속성값 5, box2는 기본값 0, box3은 속성값 -3 을 가져서 순서대로 box3, box2,box1이 나열되었다. 


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


 

자식 박스를 개별적으로 세로로 정렬할 때 사용하는 속성이다.

flex가 적용되면 기본적으로 가로로 정렬이 되기 때문에, 가로로 정렬되는 속성이 따로 존재하지 않는다.

align-self에 사용하는 속성값은 align-items과 동일하다. 

값을 지정한 해당 태그에만 적용된다.

align-self: flex-start;
해당 요소를 컨테이너의 top 위치로 정렬한다.(기본값)

align-self: flex-end;
해당 요소를 컨테이너의 bottom 위치로 정렬한다.

align-self: center;
해당 요소를 컨테이너의 middle 위치로 정렬한다.

align-self: baseline;
해당 요소를 컨테이너의 시작위치로 정렬한다.(=기본값과 결과값이 동일하다.)

align-self: stretch;
해당 요소만 컨테이너에 맞게 늘린다.

 

위의 예시에서 order 값을 지우고 다시 기본적으로 정렬한 상태에서 align-self 를 박스에 각각 적용해 보았다.

box1에서 flex-end를 적용하자. 부모박스의 가장 밑으로 정렬되었다.

box2에서 flex-start를 적용하자. 기본값으로 동일하게 상단에 정렬되어있고,

box3에서 center를 적용하자. 부모박스를 기준으로 세로의 중앙에 정렬되었다.

 

box3에 stretch를 적용해 보자 부모박스의 높이와 같이 늘어난 것을 볼 수있다.

stretch를 적용하기 위해서는 자식박스에 높이 값이 있면 안되기 때문에, 기존 div에 적용되어있던 height 값을 임시로 주석처리 해놓았다.

* 높이 값을 없앴는데 box1과 box2의 높이가 변하지 않은 이유는? line-height가 적용되어있기 때문.


마지막으로 지금까지 배웠던 flex 속성들을 적용해 보도록 도와주는 게임을 하나 소개하겠다.

'flexbox Froggy' 에서 flex 속성들을 써보며 개구리들을 연잎으로 이동시키는 게임이다.

총24단계로 적용해보는 과정들을 통해 좀 더 직관적으로 학습할 수 있다는 것이 장점이다. 

 

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com