css align-content, align-items, align-self

css속성중 위의 3개 속성들은 flexbox 혹은 grid에서 컨텐츠 들을 정렬시킬때 사용합니다.

 

 

align-self

grid나 flex item들의 정렬위치를 제어할 수 있습니다.

적용할 수 있는 value 값들은 아래와 같습니다.

/* Keyword values */
align-self: auto;
align-self: normal;


/* Positional alignment */
align-self: center;
align-self: start;
align-self: end;
align-self: self-start;
align-self: self-end;
align-self: flex-start;
align-self: flex-end;

/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch;

/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: unset;

 

대표적인 속성들만 살펴보도록 하겠습니다.

start, center, end 속성을 줄 경우 flexbox 내에서 교차축에 정렬 하는 것을 확인할 수 있습니다.

교차축에 따라 정렬을 하게 되므로 flex-direction: row, column 에 따라 다르게 정렬 되는 것을 볼 수 있습니다.

flex-direction에 따라 교차축이 달라지기 때문이죠!

flex-direction: row

flex-direction: column

 

align-items

align-items 들은 개별요소에 align-self로 부여하던 것을 상위요소에서 일괄적으로 적용하겠다는 것을 뜻합니다.

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline;
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: unset;

 

아래의 이미지는 부모의 요소에서 align-items: center를 부여하여 자식 요소들의 align-self를 center로 통일시키겠다는 의미 입니다.

 

align-content

flex item 들간의 항목 사이 및 주변의 공간 분포를 설정합니다.

/* Basic positional alignment */
align-content: center;     
align-content: start;      
align-content: end;        
align-content: flex-start; 
align-content: flex-end;   

/* Normal alignment */
align-content: normal;

/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between;                                  
align-content: space-around;  
align-content: space-evenly;  
align-content: stretch;       

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: unset;

 

align-items와 개념이 많이 헷갈렸는데요 예시와 함께 살펴보도록 하겠습니다.

 

align-items, content : center

align-items, content: start

혹시 차이점이 보이시나요???

저는 align-content를 전체 content들의 위치, 

align-items를 개별 content들의 위치 정렬로 이해하였습니다.

 

aling-content: start, center를 하면 간격들은 사라지고 전체 컨텐츠 들의 위치가 조정되는 것을 확인할 수 있습니다.

align-items 에서는 두 줄간의 간격은 그대로면서 개별 요소들의 위치만 정렬되는 것을 확인할 수 있습니다.

 

아래와 같이 stretch, space-between 등 다양한 값을 주어 원하는 대로 표시할 수도 있을것 같습니다.

 

See the Pen Untitled by 정우병 (@woobottle) on CodePen.