Flex(플렉스)란?
Flexible Box, Flexbox라고 부르기도 한다.
Flex는 레이아웃 배치 전용 기능으로 고안되었다.
기존에 사용하던 float, inline-block 방식보다 훨씬 편리한 기능이 많다.
Flex의 구조
- 부모 요소: Flex Container(플렉스 컨테이너)
- 자식 요소: Flex Item (플렉스 아이템)
<div id="wrap1"> <!-- 부모(컨테이너) -->
<div class="box"><p>1</p></div> <!-- 자식(아이템) -->
<div class="box"><p>2</p></div> <!-- 자식(아이템) -->
<div class="box"><p>3</p></div> <!-- 자식(아이템) -->
<div class="box"><p>4</p></div> <!-- 자식(아이템) -->
<div class="box"><p>5</p></div> <!-- 자식(아이템) -->
<div class="box"><p>6</p></div> <!-- 자식(아이템) -->
</div>
Flex Container의 속성
display: flex;
- 시작코드
- 컨테이너에 display:flex;를 적용하면 아이템들이 가로 방향으로 배치된다.
- 너비(width)는 자신이 가진 내용물의 width만큼 차지하고, 높이(heignt)는 컨테이너의 높이만큼 늘어난다.
- height가 알아서 늘어나는 특징은 컬럼 레이아웃을 만들 때 매우 편리하다.
[display:flex; 적용 전]
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[display:flex; 적용 후]
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
flex-direction 배치 방향 설정
아이템들이 배치되는 축의 방향을 결정하는 속성
#wrap1 {
flex-direction: row; /* 행(가로) 방향으로 배치 [default] */
flex-direction: column; /* 열(세로) 방향으로 배치 */
flex-direction: row-reverse; /* 역순으로 행(가로) 방향으로 배치 */
flex-direction: column-reverse; /* 역순으로 열(세로) 방향으로 배치 */
}
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
flex-wrap 줄넘김 처리 설정
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때
아이템 줄 바꿈을 어떻게 할지 결정하는 속성
#wrap {
flex-wrap: nowrap; /* 줄 바꿈 X [default]*/
flex-wrap: wrap; /* 줄 바꿈 O */
flex-wrap: wrap-reverse; /* 역순으로 줄 바꿈 O */
}
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
justify-content 메인축 방향 정렬
메인축 방향으로 아이템들을 정렬하는 속성
#wrap{
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
}
- flex-start(기본값): 아이템들을 시작점으로 정렬한다.
flex-direction이 row(가로 배치)일 때는 왼쪽에서 시작, column(세로 배치)일 때는 위에서 시작한다. - flex-end: 아이템들을 끝점으로 정렬한다.
flex-direction이 row(가로 배치)일 때는 오른쪽에서 시작, column(세로 배치)일 때는 아래에서 시작한다. - center: 아이템들을 가운데로 정렬한다.
- space-between: 아이템들의 사이에 균일한 간격을 만들어 준다.
첫번째 아이템과 마지막 아이템은 시작점, 끝점에 배치한 후 나머지 아이템들을 같은 간격으로 배치한다. - space-around: 아이템들의 둘레에 균일한 간격을 만들어 준다.
각 항목들은 양쪽 여백의 절반만큼 나누어 가진다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen
오른쪽 웹사이트: 0.5배로 확인하기!
align-items 수직축 방향 정렬
수직축 방향으로 아이템들을 정렬하는 속성
#wrap{
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
}
- flex-start: 아이템들을 시작점으로 정렬한다.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽에서 시작한다. - flex-end: 아이템들을 끝으로 정렬한다.
flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽에서 시작한다. - center: 아이템들을 가운데로 정렬한다.
- baseline: 아이템들을 텍스트 베이스라인을 기준으로 정렬한다.
- stretch(기본값): 아이템들이 수직축 방향으로 쭉 늘어난다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.