[CSS_Flexbox] align-items, align-self, align-content 차이점

CSS의 Flexbox를 공부하다보면 align-items, align-self, align-content 등 align에 관련된 속성이 많이 있어서 헷갈리는 경우가 있습니다. 

 

이 글을 다 읽으면 아마 명확하게 이들의 차이점을 알 수 있게 될 겁니다.

 

먼저, align에 대한 속성은 교차축(기본적으로 세로방향)에 대한 위치를 설정해줍니다.

 

 

 

align-items

 

align-items는 교차축에 위치한 모든 요소들의 위치를 정해줍니다.

Tips) items 이므로 모든 아이템들을 움직여준다라고 알아두시면 편합니다.

 

 

 

 

 

 

align-self

 

align-self는 교차축에 위치한 모든 요소들의 위치를 지정해주는 것이 아닌 특정 요소의 위치만 지정해줄 수 있습니다.

Tips) self이므로 혼자, 즉 자기만 움직일 수 있다고 알아두시면 편합니다.

 

 

모든 박스들은 원래 align-items:flex-start 속성을 가지고 있었습니다. 하지만 2번 박스에만 align-self:flex-end; 속성을 부여하였더니 오로지 2번 박스만 flex-end에 위치하게 됩니다.

 

이처럼 특정한 요소에만 align 속성을 부여하고 싶을 땐 align-self를 사용합니다.

 

 

 

align-content

 

align-content는 요소들의 줄 간격을 조절할 때 사용하는 속성입니다. 줄 간격을 사용할 때 사용하므로 무조건 두 줄 이상으로 이루어진 요소들에서만 작동합니다.

 

align-content:flex-start; 속성을 부여받았을 때의 모습입니다. flex-start는 위 아래 간격 없이 요소들을 배치하므로 줄 간격이 없는 것을 보실 수 있습니다.

 

 

align-content: space-between; 속성을 부여받은 모습입니다. 위 아래로 줄 간격이 생긴 것을 보실 수 있습니다. 

 

 

 

총 정리

 

위에서 설명했던 것들을 간단히 정리하였습니다.

 

• align-items : 교차 축에 위치한 모든 요소들에게 적용 됨.
• align-self: 교차 축에 위치한 특정 요소에게만 적용시키고 싶을 때 사용.
• align-content: 요소들의 줄 간격을 조절할 때 사용.(한 줄로만 이루어진 요소에는 적용 안 됨)