flex란
- display 속성 중 하나로써 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다.
- flex 레이아웃을 만들기 위해서는 부모 요소에 display: flex; 속성을 지정해주면 됩니다.
display: flex;
display: -webkit-flex;
display: -ms-flexbox;- 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다.
flex의 속성들
- flex에는 여러가지 속성들이 있습니다. 어떠한 것들인지 한번 알아보겠습니다.
flex-direction (배치 방향 설정)
- 자식 요소를 나열하는 방향을 지정하는 속성입니다. 부모 요소에게 지정합니다.
| 속성 값 | 속성 설명 |
| column | 위에서 아래로 나열 |
| column-reverse | 아래에서 위로 나열 |
| row (기본값) | 좌측에서 우측으로 나열 |
| row-reverse | 우측에서 좌측으로 나열 |
justify-content
- 공간이 남을 때, 즉 flex-grow: 0;일 때 자식 요소들을 가로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start (기본 값) | 시작쪽으로 정렬 (보통 왼쪽, flex-direction: row-reverse일 때는 오른쪽) |
| flex-end | 끝쪽으로 정렬 (보통 오른쪽, flex-direction: row=reverse일 때는 왼쪽) |
| center | 중앙으로 정렬 |
| space-between | 양쪽 정렬 |
| space-around | 요소 좌우 동일 간격 |
flex - wrap
- flex 자식 요소들의 줄바꿈 방식을 지정하는 속성입니다.
| 속성 값 | 속성 설명 |
| wrap | 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작합니다. |
| nowrap | 줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나갑니다. |
| wrap-reverse | 줄바꿈을 하는데, 아이템을 역순으로 배치합니다. |
flex-flow
- flex-direction과 flex-wrap을 나란히 붙여 하나의 속성처럼 쓸 수 있습니다.
- 기본 값은 flex- flow: row nowrap; 입니다
- flex-direction, flex-wrap의 순으로 한 칸 떼고 써주시면 됩니다.
align-items
- 자식 요소들을 세로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start | 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽입니다. |
| flex-end | 아이템들을 끝으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽입니다. |
| center | 아이템들을 가운데로 정렬합니다. |
| baseline | 아이템들을 텍스트 베이스라인 기준으로 정렬합니다. |
| stretch(기본값) | 부모 요소의 세로 크기를 따라 확장합니다. |
order(배치 순서)
- 자식 요소들의 순서를 바꿔주는 속성입니다. 몇 번째에 배치할지 순서를 지정합니다.
| 속성 값 | 속성 설명 |
| 0 (기본값) | 순서를 바꾸지 않습니다. |
| 양수 | 원하는 순서를 지정합니다 |
| 음수 | 좌측으로 자리를 바꾸는 횟수입니다. |
aline-self
- 자식 요소 중 선택된 항목에 대해서만 세로로 다시 정렬하는 속성입니다. 속성들은 align-items의 속성들과 같습니다.
align-content
- flex-wrap: wrap; 일 경우 여러 줄을 세로로 정렬하는 속성입니다. 속성들은 align-itmes의 속성들과 같습니다.
내용출처 : 김광수 | 조혜경 저 Responsive Web Publishing