CSS flex에 대해

#CSS flex

CSS3에서 레이아웃을 구성하는 데 있어 간편한 방식 중 하나인 flex에 대하여 알아보도록 하겠습니다.

 

flex의 두 가지 구성 방법

---

flex는 두 가지의 활용 방법으로 구분이 가능합니다. 하나는 container요소에 적용하는 방식, 다른 하나는 container요소의 자식 요소인 item에 적용하는 방식입니다. 먼저, container에 적용하는 방식부터 알아보도록 하겠습니다. (명칭만 컨테이너일 뿐 부모요소와 자식요소의 차이라고 생각하시면 됩니다.)

flex-container 속성

---

속성	설명
display	container에 flex 를 적용할 때 활용합니다.
flex-flow	flex-direction,flex-wrap을 함축한 속성입니다.
flex-direction	container 주 축의 시작 점과 방향을 정합니다.
flex-wrap	item들을 여러줄로 정렬합니다. (기본값은 여러개여도한줄로 정렬)
justify-content	주 축의 정렬 방식을 정합니다.
align-content	item들이 2줄이상 일 때 정렬하는 방식을 정합니다.
align-items	item들이 2줄이상이 아니여도 정렬 가능하게 합니다.
gap	item들 사이의 간격을 조정할 때 사용합니다.

 

display

---

display: inline-block과 같이 컨테이너 속성을 기본적으로 변경하기 위해서 사용합니다. 여기서도 두 가지 방식의 차이가 있습니다.

display: flex;	block 요소처럼 줄 바꿈 형식으로 container를 정렬하고 싶을 때 사용
display: inline-flex;	inline 요소처럼 container를 나란히 정렬하고 싶을 때 사용

 

flex-direction

---

주 축(main-axis)의 시작과 방향을 정합니다. 기본적인 시작 위치는 화면의 왼쪽 위입니다.

row	기본값입니다. 가로로 왼쪽에서 오른쪽으로 정렬합니다.
row-reverse	reverse로 반대의 의미를 가집니다. 오른쪽에서 왼쪽으로 정렬합니다.
column	세로로 정렬합니다. 위 쪽에서 아래로 정렬합니다.
column-reverse	아래에서 위로 정렬합니다.

 

정리하자면 아래와 같습니다.

 

flex-wrap

---

item들을 여러 줄로 정렬할지를 정의합니다.

nowrap	기본값입니다. 여러 줄로 정렬하지 않고 한줄로 정렬합니다.
wrap	여러줄로 정렬합니다.
wrap-reverse	여러줄로 정렬하되, 화면의 역순으로 정렬합니다.

 

정리하자면 아래와 같습니다.

주의할 점

wrap-reverse의 값을 부여할 시, 완전히 반대로 정렬되는 것이 아닌, 줄의 순서만 역으로 정렬되는 것을 볼 수 있습니다.

 

justify-content

---

item들의 정렬 방식을 정의합니다.

flex-start	기본값입니다. item들을 시작점에서 부터 정렬합니다.
flex-end	item들을 끝점에서 부터 정렬합니다.
center	item들을 중앙에서부터 정렬합니다.
space-around	item들의 양쪽 끝에 여백을 지정합니다.
space-between	item들의 사이마다 여백을 지정합니다. 양쪽 끝은 영향을 받지 않습니다.
space-evenly	item들의 사이마다 여백을 지정합니다. 양쪽 끝도 고르게 영향을 받습니다.

 

정리하자면 다음과 같습니다.

 

 

align-content

---

아이템 각각 적용 되지 않고 하나의 행 마다 적용되어지는 속성입니다.

stretch	기본값입니다.
flex-start	item들을 시작점으로 정렬합니다.
flex-end	item들을 끝점으로 정렬합니다.
center	item들을 중앙에서부터 정렬합니다.
space-around	item들의 양쪽 끝에 여백을 지정합니다.
space-between	item들의 사이마다 여백을 지정합니다. 양쪽 끝은 영향을 받지 않습니다.
space-evenly	item들의 사이마다 여백을 지정합니다. 양쪽 끝도 고르게 영향을 받습니다.

 

정리하자면 다음과 같습니다.

 

align-items

---

item들이 두 줄로 정렬되어 있지 않아도 설정이 가능합니다.

stretch	기본값입니다.
flex-start	item들을 시작점으로 정렬합니다.
flex-end	item들을 끝점으로 정렬합니다.
center	item들을 중앙에서부터 정렬합니다.
baseline	item들을 문자를 기준으로 정렬합니다. 이 때 item들의 박스의 크기는 고려되지 않습니다.

gap

---

item 사이의 간격의 크기를 조정할 수 있습니다. 단위는 px, em, cm, 등 여러 가지 단위로 사용 가능합니다.

 

이제 각각의 item을 정렬하는 방법인 flex-item 방식에 대해 알아보겠습니다. 속성을 부여할 때, 전체적인 containter인 부모 요소에 부여하는 것이 아닌, 자식 요소인 item 하나하나에 속성을 부여해 주는 것입니다.

 

flex-item 속성

---

order	item들의 순서를 변경 가능하게 합니다.
flex-grow	item의 크기 증가 비율을 설정 합니다.
flex-shrink	item의 크기 감소 비율을 설정 합니다.
flex-basis	item의 기본 넓이를 설정 합니다.
flex	flex-grow, flex-shrink, flex-basis를 함축해서 사용 가능합니다.
align-self	교차 축에서의 item 정렬 방법을 설정합니다.

 

order

---

item의 순서를 설정합니다. 설정 한 수의 크기가 클수록 후순위로 밀려나고, 작을수록 우선수위로 정해집니다. 음수로도 설정이 가능해집니다.

 

order

item의 정렬 순서를 설정합니다.

기본값은 0이고 숫자로 설정합니다.

 

정리하자면 다음과 같습니다. 아래의 코드 블록은 두 번째 컨테이너에 적용되었습니다.

.c2 .item1 {
    order: 5; 
}
.c2 .item2 {
    order: -3;
}
.c2 .item3 {
    order: 2;
}
.c2 .item4 {
    order: 1;
}

숫자가 모두 다르지만 음수부터 차례대로 정렬되는 것을 볼 수가 있습니다.

 

flex-grow

---

flex-grow

item의 크기 비율을 설정합니다.

기본값은 0이고 정수로 설정합니다.

 

item 크기의 증가 비율을 설정합니다. 숫자가 크면 클수록 더 큰 비율을 가지게 됩니다. 예를 들자면 하나의 container에 속한 아이템들의 grow 속성 값의 총합을 계산하여 각각의 속성 값 대로 비율을 나누게 됩니다. 이때, container의 전체 너비를 기준으로 설정되게 됩니다. 아래의 예시를 보여드리겠습니다.

아래에 있는 컨테이너를 예시로 들자면, 각각의 속성 값이 1, 7, 1, 5이므로, 총합은 14이며, 1은 전체 컨테이너 너비에 비해 1/14만큼, 7은 7/14 = 1/2 만큼, 5/14 만큼의 크기를 가지게 됩니다.

즉, 1은 전체의 7% 정도의 크기, 7은 50% 정도의 크기, 5는 35% 정도의 크기를 가지게 됩니다.

.container { diplay: flex; }
.item1 { flex-grow: 1; }
.item2 { flex-grow: 7; }
.item3 { flex-grow: 1; }
.item4 { flex-grow: 5; }

 

flex-shrink

---

굉장히 이해하기 까다로운 속성입니다. 예를 들어 설명해 보겠습니다. 만약 웹 브라우저를 마우스로 직접 크기를 조정한다고 생각해 봅시다. 이때 마우스 포인터가 움직거리가 만약 30px 일 때, flex-shrink를 설정해 두었다면, 해당 속성 값의 비율 대로 감소되게 됩니다.

item 두 개의 속성 값이 각각 2와 1일 경우, 속성값을 2로 설정한 item은 2/3 크기인 20px 만큼, 속성값을 1로 설정한 item은 1/3 크기인 10px 만큼 줄어들게 됩니다.

제가 아직 기술이 부족하여 위 내용을 직접 표현해 드리기가 어렵습니다. 더 성장하고 돌아와 수정하도록 하겠습니다.

 

flex-basis

---

item의 기본 너비를 설정합니다. 단위는 px이나 %등 다양하게 지정 가능하고, 기본적으로 auto로 설정되어 있습니다.

 

flex

---

flex-grow, flex-shrink, flex-basis 속성의 함축형입니다. 작성 방법은 다음과 같습니다.

flex: flex-grow값 flex-shrink값 flex-basis값
flex: 1 1 10px; /* 증가 값, 감소 값, 기본 너비 설정 값*/

 

flex-grow를 제외하고 모두 생략이 가능합니다. 생략할 경우, 기본 값은 flex-shrink는 1, flex-basis는 0 값이 설정됩니다.

 

align-self

---

교차 축에서 item들의 개별 정렬 방식을 설정합니다.

flex-container에서 설정했던 align-items와 같지만, 이 속성을 사용하면 전체 item들이 아닌 각각의 item들의 개별로 설정이 가능하다는 것입니다.

auto	container의 align
stretch	container의 줄을 채우기 위해서 item 크기를 빈 공간 만큼 늘려줍니다.
flex-start	item을 각 줄의 시작점으로 정렬 합니다.
flex-end	item을 각 줄의 끝 점으로 정렬합니다.
center	item 줄의 중앙으로 정렬 합니다.
baseline	item을 문자선에 정렬합니다.