#12. CSS 정렬방법 flex :: align-content

align-content:

flex로 지정된 container 내부에 있는 item들을 교차 축(cross-axis)을 기준으로 정렬합니다.
주의할 점은 flex-wrap 속성을 통해 item들이 여러 줄이고 여백이 있을 경우만 사용할 수 있습니다.

방법은 총 6가지로 아래와 같습니다.
    1. align-content: stretch; (default)
    2. align-content: flex-start;
    3. align-content: flex-end;
    4. align-content: center;
    5. align-content: space-between;
    6. align-content: space-around;

우선 기본 HTML과 CSS 코드입니다.

<!-- HTML -->
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
</div>

/* CSS */
.container {
  height: 400px;
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
  align-content: ; /* 옵션이 들어가야 할 자리입니다. */
}

.container .item {
  width: 120px;
  height: 100px;
  /* stretch 를 사용할 때 auto로 설정 */
  /* height: auto; */
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

align-content: stretch; (default)

align-content는 교차 축을 기준으로 하기 때문에 일반 flex 옵션인 경우 12시 방향과 6시 방향이 기준입니다.
아래 예시를 확인하시려면 height을 auto로 놓으셔야 합니다. stretch 옵션은 공백이 있는 container를 채우기 위해 교차축 방향으로 item을 늘리기 때문에 height을 px로 고정시켜 놓으면 적용되지 않습니다.

align-content: flex-start;

flex-start는 기준점인 교차 축의 시작점부터 차례로 item을 정렬합니다.

align-content: flex-end;

flex-end는 기준점인 교차 축의 끝부터 차례로 item을 정렬합니다.

align-content: center;

center는 교차 축의 시작점과 끝의 중간 지점에 item을 정렬합니다.

align-content: space-between;

시작 item들은 시작점에, 마지막 item들은 끝에 정렬되고 나머지는 item 사이에 고르게 정렬됩니다.

 

align-content: space-around;

item들을 균등한 여백을 포함해 정렬합니다.