CSS 6. Align- Self (Flex items)

Align- Self

교차축을 기준으로 배열된 단일 요소의 위치를 바꿀 수 있는 속성.

flex-item에 적용해야 한다.

---

●  align-self 예시

< HTML >

 

< CSS > 

 

:nth-child(2)를 사용하여 5개의 div중 2번째 요소에 align-self:flex-end;속성을 사용.

flex-contatiner가 아닌 flex-items에 사용하였다.

 

 

<실행결과>

flex-direction:row;이므로 주축이 좌 → 우 이고,

교차축은 상  →  하이다.

align-self:flex-end; 속성은 교차축의 끝에 정렬하므로 div의 2번째 요소만 아래로 정렬되었다. 

---

< align-self 속성을 여러개의 flex-item에 적용한 결과 >

---

< 위의 예제에서 flex-direction:column;으로 주축을 상 →  하로 변경하였을 때의 결과 >

 

교차축은 좌  →   우로 변경되어

두번째 요소는 중앙에, 세번째요소는 교차축의 끝인 오른쪽 끝에 정렬됨.