CSS Flexbox: space 속성 적용 예시

flexbox 간 공백을 주는 방법으로 justify-content와 align-content의 space-속성값을 이용할 수 있다.

jusity-content가 중심축을 기준으로 하는 배치 방식을 결정한다면

align-content는 반대축을 기준으로 하는 배치 방식을 결정한다.

space-around, space-evenly, space-between

이 3가지 방법의 차이를 예시를 통해 비교해보고자 한다.

 

<적용 예시>

jusify-content: space-around; (box를 둘러싼 공백 생성, 공백이 겹치는 구간과 그렇지 않은 부분의 너비가 달라짐)

space가 겹치는 부분(box들 간 간격)과 겹치지 않는 부분은 공백 너비가 달라진다.

 

jusify-content: space-evenly; (동일한 공백을 생성)

전체영역 동일한 공백이 주어진다. 마음이 편해진다 (?)

 

jusify-content: space-between; (box 간에만 공백을 주고 양 끝은 공백없이 배치)

양 끝은 공백없이 배치하고 box 간에만 공백이 주어졌다.

 

align-content:center;

반대축을 기준으로 가운데에 배치됨.

 

align-content:space-around;

 

align-content:space-evenly;

상하 공백이 동일하게 주어짐.

 

align-content:space-between;

box간에만 간격 주어짐