6. display의 flex

  display: flex 요소

display: flex는 컨테이너 요소(부모 요소)에 설정한다.

  주요 속성

1. flex-direction

flex-direction은 내부 요소(자손 요소)의 배치 방향을 조정한다.

 

속성값)

• row : 기본값. 왼쪽에서부터 가로로 배치
• row-reverse : 오른쪽에서부터 가로로 배치
• column : 위에서부터 세로로 배치
• column-reverse : 아래에서부터 세트로 배치

2. flex-wrap

flex-wrap은 내부 요소의 줄바꿈을 설정한다.

 

속성값)

• nowrap : 기본값. 줄바꿈 없음. (내부 요소가 부모 요소 밖으로 나감)
• wrap : 자동 줄바꿈. (넘치는 요소가 밑으로 이동)
• wrap-reverse : 자동 줄바꿈. (넘치는 요소가 위로 이동)

 

3. flex-flow

flex-flow는 flex-direction과 flex-wrap을 같이 작성하는 단축 속성이다.

 

4. justify-content

justify-content는 메인축(가로) 방향 정렬 방식을 지정한다.

 

속성값)

• flex-start : 내부 요소 왼쪽 정렬.
• flex-end : 내부 요소 오른쪽 정렬.
• center : 내부 요소 가운데 정렬.
• space-between : 가운데 정렬 시 요소간 간격을 동일하게, 이때 좌우 여백을 고려하지 않음.
• space-around : 가운데 정렬 시 요소간 간격을 동일하게, 이때 모든 내부 요소의 동일한 좌우 Margin을 적용.
• space-evenly : 가운데 정렬 시 요소간 간격을 동일하게, 이때 모든 내부 요소와 좌우 여백을 동일하게 적용.

5. align-items

align-items은 수직축(세로) 방향 정렬 방식 지정한다.

 

속성값)

• stretch : 컨테이너 요소의 높이에 내부 요소의 높이를 맞춤.
•  flex-start : 내부 요소들의 윗선이 동일하게 맞춤. (컨테이너 요소의 위쪽에 배치됨)
• flex-end : 내부 요소들의 아랫선이 동일하게 맞춤. (컨테이너 요소의 아랫쪽에 배치됨)
• center : 내부 요소들이 컨테이너 요소의 세로 중앙에 배치됨.
• baseline : 내부 요소 중 큰 요소의 컨텐츠(내용)를 기준으로 베이스라인에 맞춤. (컨테이너 요소의 위쪽에 배치됨)
• align-content : 내부 요소의 수직 간격을 조정하는 속성. stretch, justify-content의 6개 속성값.

  flex item 관련 속성

1. flex-basis

flex-basis는 아이템 요소의 기본 크기를 지정한다. 컨테이너의 flex-direction이 row면 너비, column이면 높이의 크기를 나타낸다.

 

속성값)

• auto : 기본값. 요소의 기본 크기를 사용.
• 그 외 %, px 등으로 크기값을 지정.
• flex-basis를 사용하지 않고 width로 너비 지정 가능.

2. flex-grow

flex-grow는 유연하게 확대하는 기능이다. 0과 0보다 큰 값을 설정하고(0은 기본값) 요소의 너비가 아닌 확대되었을 때의 여백의 비율로 아이템별로 다르게 공간을 배분할 수 있다.

 

3. flex-shrink

flex-shrink는 유연하게 축소하는 기능이다.  0과 0보다 큰 값을 설정하고 (1은 기본값) 0일 경우 flex-basis보다 작아지지 않는 고정된 폭을 지정할 수 있다.  이때 고정 크기는 width로 설정한다.

 

4. order

order는 요소의 배치 순서를 결정하는 속성이다.