CSS Disply Flex

1. display: flex 개요

display: flex는 CSS의 Flexbox 레이아웃 시스템으로, 컨테이너 내부의 아이템들을 효율적으로 배치하며

다양한 화면 크기의 레이아을 쉽게 조정이 가능하다.

 

주요 속성

1) Flex Container 속성

flex-direction: 아이템들이 배치되는 방향을 설정합니다. 기본값은 row (가로 방향)입니다.

.container {
  display: flex;
  flex-direction: row; /* column, row-reverse, column-reverse 가능 */
}

justify-content: 아이템들이 주 축 을 따라 정렬되는 방식을 지정합니다

.container {
  justify-content: center; /* flex-start, flex-end, space-between, space-around 등 가능 */
}

align-items: 아이템들이 교차 축(cross axis)을 따라 정렬되는 방식을 지정합니다

align-items: 아이템들이 교차 축(cross axis)을 따라 정렬되는 방식을 지정합니다

 

---

flex 실습 예제

부모 요소에 flex 코드만 삽입하였을때 자식들의 요소가 세로에서 가로로 배치됨

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

 

flex-wrap : 줄바꿈

flex-wrap: wrap-reverse : 아이템들이 아래에서 위로 줄을 바꿔서 쌓입니다

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

align-items 속성 사용하기

• align-items: center : 세로로 중앙에 위치하게 됩니다
• align-items: flex-start : 세로로 보면 상단에 위치하게 됩니다.
• align-items: flex-end : 세로로 보면 하단에 위치하게 됩니다.
• align-items: stretch : 아이템의 크기를 컨테이너의 높이에 맞게 늘립니다(기본값)
• align-items: baseline : 아이템들이 텍스트의 기준선(baseline)을 기준으로 정렬됩니다 (*주로 텍스가 포함된요소)

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

justify-content 속성 사용하기

• justify-content: center : 모든 아이템이 중앙에 모입니다
• justify-content: flex-start : 시작 부분에 아이템을 정렬합니다
• justify-content: flex-end :  끝 부분에 아이템을 정렬합니다.
• justify-content: space-between : 시작점과 마지막점을 두고 사이에 아이템들은 균등하게 배분
• justify-content: space-around : 아이템들 사이에 균등한 간격을 주며, 양 끝에도 일정 간격이 추가됩니다
• justify-content: space-evenly : 아이템들 사이와 양 끝에 균등한 간격을 줍니다. 모든 간격이 동일합니다.

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

align-content : 속성 사용하기

• align-content: center : 모든 줄이 컨테이너의 중앙에 모이게 됩니다. [ 위 코드를 보면 wrap 코드를 사용하여 줄바꿈을 하였을때 위 위래 아이템들이 떨어져 있는데 한 중앙으로 모을 수 있다.
• align-content: flex-start : 세로로 보면 상단에 배치됩니다
• align-content: flex-end : 세로로 보면 하단에 배치됩니다.
• align-content: space-around : 줄들 사이에 균등한 간격을 두며, 줄들 바깥쪽에도 일정 간격이 생깁니다
• align-content: space-between : 첫 번째 줄은 교차 축의 시작점에, 마지막 줄은 끝점에 정렬되며, 줄들 사이에 균등한 간격이 생깁니다.
• align-content: normal : 아이템들이 기본 배치 방식에 따라 배치됩니다.

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.