[CSS] Flex를 활용한 레이아웃
레이아웃만 잘 이해해도 디자인 시간이 반으로 줄어든다.
HTML 예시
<div className="container">
<div className="item">item1</div>
<div className="item">item2</div>
<div className="item">item3</div>
</div>Container 속성
- display : flex;
flex 레이아웃을 적용하기 위해 container에 display 모드를 flex로 설정한다.
.container {
display : flex;
}flex는 item들을 가로로 배치하는 것이 기본이다. item들의 길이 만큼 width를 차지한다. 그리고 가장 height이 긴 item 또는 container의 height만큼 height의 길이가 늘어나는 특징이 있다.
display 모드를 flex가 아닌 inline-flex로 한다면, 가로 전체를 차지하지 않고 (여백을 포함x) item의 가로길이 만큼만 차지하도록 설정된다. :: 다른 요소가 있을 때 flex container와 가로 배치 가능
2. flex-direction
item들의 배치 방향을 설정한다.
.container {
flex-direction : row; /*column, row-reverse, column-reverse*/
}- row : 왼쪽에서 오른쪽 :: default
- column : (세로) 위에서 아래
- row-reverse : 오른쪽에서 왼쪽
- column-reverse : (세로) 아래에서 위
3. flex-wrap
item들의 가로 길이가 최대 길이를 초과할 때, item 줄바꿈을 어떻게 할지 설정한다.
.container {
flex-wrap : nowrap; /*wrap, wrap-reverse*/
}- nowrap : item이 container 크기를 튀어나가게 둠 :: default
- wrap : 초과하는 item을 다음 줄로
- wrap-reverse : 초과하는 item을 이전 줄로
4. justify-content
justify는 item들이 나열된 방향(row : 가로 방향, column : 세로 방향)의 정렬을 의미한다.
.container {
justify-content : flex-start;
/*flex-end, center, space-between, space-around, space-evenly*/
}- flex-start : 시작 부분으로 정렬 (flex 방향이 가로라면 왼쪽 정렬) :: default
- flex-end : 끝 부분으로 정렬 (flex 방향이 가로라면 오른쪽 정렬)
- center : 가운데 정렬
- space-between : item들이 container에 꽉 차게 정렬, item 사이사이에 같은 크기의 여백
- space-around : item들이 container에 꽉 차게 정렬(처음과 끝 여백 존재), item마다 이전과 다음에 같은 크기의 여백 (item과 item 사이에는 두 번의 여백이 들어가는 셈)
- space-evenly : item들이 container에 꽉 차게 정렬(처음과 끝 여백 존재), 처음과 끝, item 사이에 같은 크기의 여백 (item과 item 사이에는 한 번의 여백만)
5. align-items
align은 item들이 나열된 방향의 수직방향 정렬을 의미한다.
.container {
align-items : stretch
/*flex-start, flex-end, center, baseline*/
}- stretch : 수직방향으로 확장 (flex 방향이 가로라면 height이 확장) :: default
- flex-start : 시작 부분으로 정렬 (flex 방향이 가로라면 위쪽 정렬)
- flex-end : 끝 부분으로 정렬 (flex 방향이 가로라면 아래쪽 정렬)
- center : 가운데 정렬
- baseline : containter 크기와 상관 없이, item들 중 가장 큰 것을 기준으로 baseline을 잡아 배치
+align-content로 두 줄 이상의 item 배치도 설정 가능 (flex-wrap : wrap; 인 경우)
Item 속성
- flex-basis
item들의 크기를 설정한다. px, rem, % 등 다양한 단위를 사용할 수 있다.
.item {
flex-basis : auto /*default값*/
}2. flex-grow
item이 flex-basis 값보다 커질 수 있는지를 설정한다. 0과 0보다 큰 값으로 설정 가능하고, 0보다 큰 값을 설정하면 item이 flexible 박스가 되어 크기가 커지며 공간을 차지하게 된다.
.item {
flex-grow : 0; /*default값*/
}숫자의 비율로 item이 차지하는 공간의 비율을 설정할 수도 있다.
.item:nth-child(1) {
flex-grow : 1;
}
.item:nth-child(2) {
flex-grow : 1;
}
.item:nth-child(3) {
flex-grow : 2;
}위처럼 설정하면 각각의 item이 1:1:2 의 비율의 공간을 차지하며 확장된다.
3. flex-shrink
item이 flex-basis 값보다 작아질 수 있는지를 설정한다. 마찬가지로 0과 0보다 큰 값으로 설정 가능하다. 단, flex-shrink는 default 값이 1이어서 다른 설정을 하지 않아도 item은 flexible 박스로서 줄어든다.
.item {
flex-shrink : 1; /*default값*/
}4. align-self
item이 flex 방향의 수직방향으로 어떻게 정렬될지, align-items로 설정한 정렬보다 우선되게 각각의 item에 적용할 수 있다.
.item {
align-self: auto;
/*stretch, flex-start, flex-end, center, baseline*/
}기타 속성
- flex-flow
container에 flex-direction과 flex-wrap을 한 번에 설정할 수 있다.
.container {
flex-flow: row wrap;
}2. flex
item에 flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있다.
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}3. order
item들의 디자인적 나열 순서를 설정할 수 있다. (스크린 리더 등을 활용할 땐 반영되지 않음)
.item:nth-child(1) {
order: 3;
}
.item:nth-child(2) {
order: 1;
}
.item:nth-child(3) {
order: 2;
}두번째, 세번째, 첫번째 순서로 나열 순서가 변경된다.
4. z-index
Z축 정렬, 숫자가 큰 item이 더 위로 올라와 뒤 item이 가려진다.
.item:nth-child(2) {
z-index: 0; /*default값*/
}마무리하며
table 레이아웃, float, inline-block를 활용하는 디자인 방식은 out of date한 디자인 방식이라고 생각된다. 물론 여전히 어딘가에선 쓰이겠지만, 머지 않아 지원하지 않고 차세대 레이아웃 flex와 grid를 대부분 사용하게 될 것이라고 전망한다. 따라서 flex 레이아웃의 이해는 디자인 시간을 단축하고 차세대를 대비하는 데에 꼭 필요할 것이라고 생각된다. (grid 레이아웃도 언젠가 공부해보면 좋겠다.)
