CSS flex-box 의 부모 속성 align-items

📌  Flex-Box : Flex Container 나는 부모 속성

 

 

🏁  align-items: stretch / flex-start / flex-end / center / baseline

 

❗  item들이 한 줄일 경우 ! align-items 속성을 사용한다.

      왜냐 ?? flex-wrap을 통해 2줄 이상일 경우에는 align-content속성이 우선시된다.

       -->  align-items를 사용하려면 align-content속성을 기본값(stretch)로 설정하거나 아예 사용하지 않아야한다.

       -->  그래서, justify-content와 align-items의 조합을 많이 사용하는 게 아닌가 싶다

       -->  justify-content로 flex-line 정리하고, align-items로 item들 라인 정리하고.

 

❗  align-content와 align-items의 차이 ??

       align-content: flex-line을 정렬한다.

       align-items: flex line을 기준으로 item들을 정렬한다.

 

❗  flex-direction이 row일 때 flex-direction이 column일 때

       row: 수직으로 영향 有

       column: 수평으로 영향 有

 

/* row */
/* 위아래 늘이기 */

.container {
  height: 500px;
  flex-flow: row wrap;
  align-items: stretch;
}


/* column */
/* 좌우로 늘이기 */

.container {
  height: 500px;
  flex-flow: column wrap;
  align-items: stretch;
}

지정된 width나 height만큼 꽉꽉 채워 늘려준다

 

.container {
  align-items: flex-start;
}

 

flex-flow: row wrap  -->  flex-line 기준으로 item들이 위쪽으로 붙는다

flex-flow: column wrap  -->  flex-line 기준으로 item들이 왼쪽으로 붙는다

 

.container {
  align-items: flex-end;
}

 

flex-flow: row wrap  -->  flex-line 기준으로 item들이 아래쪽으로 붙는다

flex-flow: column wrap  -->  flex-line 기준으로 item들이 오른쪽으로 붙는다

 

.container {
  align-items: center;
}

 

flex-flow: row wrap  -->  flex-line 기준으로 item들이 상하 가운데 정렬된다

flex-flow: column wrap  -->  flex-line 기준으로 item들이 좌우 가운데 정렬된다

 

.container {
  align-items: baseline;
}

 

flex-flow: row wrap  -->  flex-line 기준으로 item들이 문자 기준선에 정렬된다 ( 아래쪽이 기본 )

flex-flow: column wrap  -->  flex-line 기준으로 item들이 문자 기준선에 정렬된다 ( 정확한 확인 필요 ?! )