[CSS] flex) justify-content & align-content

justify-content  

가로 축을 기준으로 좌우에 대한 정렬을 관장함

 

[해당요소]

• flex-start (default) : 요소들을 컨테이너의 왼쪽으로 정렬
• flex- end : 요소들을 컨테이너의 우측으로 정렬
• center : 요소들을 컨테이너의 중앙으로 정렬
• space-between : 요소들 사이에 동일한 간격을 둡니다.
• space-around : 요소들 주위에 동일한 간격을 둡니다.
• space-evenly(FireFox Only) : 첫번째로 오는 정렬 대상 전에 두 개의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

See the Pen Untitled by Bockchi Blood (@Bockchi-Blood) on CodePen.

 

=>  space-between 은 사이의 간격이 일정합니다. 

(양쪽 끝을 붙일 상태에서 사이사이에 일정한 간격을 두기 위해선 좋네요)

=>  space-around는 외부의 간격이 일정합니다.

(맨 처음과 맨 끝은 좌우가 일정하진 않지만 끝과 끝은 일정하죠 )

 

align-items

세로 축을 기준으로 정렬을 하게 됩니다.

 

[해당요소]

• stretch(default) : 컨테이너의 맞게  늘립니다.
• flex-start : 컨테이너의 최상단으로 정렬 합니다.
• flex-end : 컨테이너의 최하단으로 정렬합니다.
• center : 컨테이너의 세로 축의 중앙으로 정렬 합니다.
• baseline : 컨테이너의 시작위치에 정렬 합니다.

See the Pen Untitled by Bockchi Blood (@Bockchi-Blood) on CodePen.

 

=>  baseline을 보면 flex-start 와 차이점이 없어 보인다.

=>  flex-start는 시작점에 자식 요소를 맞추는 것.

=>  baseline은 자식 요소들의 텍스트 기준선에 맞추는 것.이라고 한다.

=>  왠지 baseline은 쓸 일이 없을 것 같다…