align-content
컨텐츠 정렬 속성
플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다.
이 때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다.
이 속성은 컨텐츠들을 각각 세로로 정렬하고, 요소 사이에(between), 주위에(around)
동일한 간격을 주어 배치할 수 있다.
-align-content:flex-start;
:여러 줄들을 컨테이너의 top위치에 배치한다.
-align-content:flex-end;
:여러 줄들을 컨테이너의 bottom위치에 배치한다.
-align-content:center;
:여러 줄들을 컨테이너의 middle위치에 배치한다.
-align-content:space-between;
:여러 줄들 사이에 동일한 간격을 준다.
-align-content:space-around;
:여러 줄들 주위에 동일한 간격을 준다.
-align-content:space-evenly;
:여러 줄들에 모두 동일한 간격을 준다.
-align-content:stretch;
:여러 줄들을 컨테이너(부모박스)에 맞도록 늘림
기본값으로 flex:랩만 적용했을경우에 아래와 같이 나온다.
<예시>
-align-content:flex-start를 적용할 경우
위의 이미지와 같이 상단에 여백없이 나열이 된다.
-align-content:flex-end를 적용할 경우,
위의 이미지와 같이 하단에 여백없이 나열이 된다.
-align-content:center를 적용할 경우,
위의 이미지와 같이 중앙에 여백없이 나열이 된다.
align-content:space-between를 적용할 경우,
위의 이미지와 같이 상하 패딩없이 사이의 여백이 동일하다.
align-content:space-around를 적용할 경우,
위의 이미지와 같이 상하의 여백이 존재하며 각 박스의 여백이 동일하다.
align-content:space-evenly를 적용할 경우,
위의 이미지와 같이 상하 여백이 존재하며 모든 박스의 여백이 동일하다.
align-content:stretch를 적용할 경우.
위의 이미지와 같이 여백없이 세로로 꽉차게 늘어난다.
flex를 사용할때는 보통 gap속성으로 여백을 준다.
일반 gap속성을 주면 위의 이미지와 같이 상하좌우의 여백을 준다.
반면에 row-gap속성을 주면 위의 이미지와 같이 상하에만 여백을 줄 수있다.
column-gap속성을 주면 좌우 여백을 줄 수 있다.
