#13. CSS 정렬방법 flex :: align-items

align-items

교차 축에서 Items들의 정렬 방법을 설정합니다.
Item들이 한 줄일 경우 많이 사용합니다.

주의할 점은 Item들이 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선입니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값으로 설정해야 합니다.

    1. align-items: stretch; (default)
    2. align-items: flex-start;
    3. align-items: flex-end;
    4. align-items: center;
    5. align-items: baseline; - 글자의 문자열에 따라 정렬됨

align-items 는 align-content와는 다르게 각 줄에 따라 움직입니다.
예를 들어, flex-stert로 지정되면 첫번째 줄의 item들은 12시 방향에 붙어있게 되고, 두번째 줄의 item들은 첫번째 줄의 바닥, 두번째 줄의 12시 방향에 붙어있게 됩니다. 이 부분에 대한 예시는 아래에서 자세히 살펴보도록 하겠습니다.

아래에서 살펴 볼 예제의 기본 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-items: ;    /* 이 부분에 옵션이 들어갑니다. */
}

.container .item {
  width: 120px;
  height: 100px;
  /* height: auto; */ /* auto 는 stretch 인 경우에 설정합니다. */
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  /* item 내부 글자 가운데 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;
}

align-items: stretch; (default)

우선 .container .item 의 height을 auto로 바꾸어 stretch가 적용되도록 합니다. 여기서 height이 정해져 있으면 stretch가 적용되지 않는 이유는 stretch 자체가 교차 축으로 Item들을 늘려주는데, height이 정해져 있으면 그 이상으로 늘어나지 않기 때문입니다. 

align-items: flex-start;

align-items 는 Item들이 한 줄인 경우에 많이 사용한다고 위에서 언급했습니다. 그 이유는 아래와 같은 모습을 보면 확인하실 수 있습니다.

align-items는 한 줄씩 적용받다보니 align-contents와는 달리 시작점이 두 곳이 생깁니다. 첫번째 줄은 교차 축에 해당하는 12시 방향이고, 두번째 줄은 첫번째 줄 박스의 바닥 부분이 시작점이 됩니다.

아래 그림을 참고해주시면 감사하겠습니다. 이는 flex-end 에서도 똑같이 적용됩니다.

왼쪽(align-contents: flex-start;)과 오른쪽(align-items: flex-start;)의 시작 지점이 다름

align-items: flex-end;

위에서 언급한 것과 같이 첫번째 줄과 두번째 줄의 끝이 다르기 때문에 아래 사진과 같은 형태가 나옵니다.

align-items: center;

각 줄의 가운데로 정렬됩니다.

align-items: baseline;

baseline은 각 item 내부의 문자열 바닥에 기준선을 맞춥니다. 아래 사진은 다음 코드를 추가로 입력한 상태에서 출력해보시기 바랍니다. 다음 코드가 이해가 안되시는 분들은 CSS 선택자 << 이 부분을 클릭해서 가상클래스선택자 중에서 nth-child(n) 부분을 확인해보시기 바랍니다.

.container .item:nth-child(2n+2) {
  font-size: 100px;
}