Flex(Flexible Box)

본 글은 공부하기 위한 목적으로 포스팅 되었으며 아래 링크의 원문을 참고하였습니다.
https://heropy.blog/2018/11/24/css-flexible-box/

 

Flex

Flex는 수평이 될 요소들의 container에 display: flex 를 적용한다.

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.box-container {
  display: flex;
}

 

CSS3 Flexible Box

Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.

 

우선 Flex는 Container와 Items 2개의 개념으로 나뉜다.

주의할 부분은 각각 적용하는 속성이 구분되어 있다.

• Container : Items를 감싸는 부모 요소. 각 Item을 정렬하기 위해서는 Container가 필수
  • 속성: display, flex-flow, justify-content, align-content, align-items 등
• Items
  • 속성: order, flex, align-self

 

Flex Container

속성	의미
display	Flex Container를 정의
flex-flow	flex-direction 과 flex-wrap 의 단축 속성
flex-direction	Flex Items의 주 축을 설정
flex-wrap	Flex Items의 여러 줄 묶음(줄 바꿈) 설정
justify-content	주 축의 정렬 방법을 설정
align-content	교차 축의 정렬 방법을 설정 (2줄 이상)
align-items	교차 축에서 Items의 정렬 방법을 설정 (1줄)

* 주 축(main-axis) / 교차 축(cross-axis)

 

display

• 여기서 수평/수직 쌓임은 Containers가 정렬되는 것임을 주의한다.
• 내부에 Items에는 영향을 주지 않는다.

 

값	의미
flex	Block 특성의 Flex Container를 정의 (수직 쌓임)
inline-flex	Inline 특성의 Flex Container를 정의 (수평 쌓임)

 

flex-flow

단축 속성으로, Flex Items의 주축을 설정하고 Items의 여러 줄 묶음(줄바꿈)도 설정한다.

flex-flow: 주축(flex-direction) 여러줄묶음(flex-wrap);

.flex-container {
  flex-flow: row-reverse wrap;
}

 

- flex-direction

Items의 주축을 설정한다.

값	의미	기본값
row	Items를 수평축(왼쪽→오른쪽)으로표시	row
row-reverse	Items를 row 의 반대축으로 표시
column	Items를 수직축(위→아래)으로 표시
column-reverse	Items를 column 의 반대축으로 표시

 

- flex-wrap

Items의 여러줄 묶음(줄바꿈)을 설정한다.

• 기본적으로 Items는 한 줄에서만 표시되고 줄바꿈되지 않는다.
• 이는 지정된 크기(주축에 따라 width/height)를 무시하고 한 줄 안에서만 가변한다.
• Items를 줄바꿈하려면 값으로 wrap 을 사용해야 한다.

 

값	의미	기본값
nowrap	모든 Items를 여러 줄로 묶지 않음(한 줄에 표시)	nowrap
wrap	Items를 여러 줄로 묶음
wrap-reverse	Items를 wrap 의 역방향으로 여러 줄로 묶음

 

 

justify-content

주축의 정렬방법을 설정한다.

값	의미	기본값
flex-start	Items를 시작점으로 정렬	flex-start
flex-end	Items를 끝점으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

 

align-content

교차축의 정렬방법을 설정한다.

• 주의할 점은 flex-wrap 속성을 통해 Items가 2줄 이상이고 여백이 있을 경우만 사용할 수 있다.
• Items가 한 줄일 경우 align-items 속성을 사용한다.
• stretch 는 교차축에 해당하는 너비(width 혹은 height)가 값이 auto (기본값)일 경우 교차축을 채우기 위해 자동으로 늘어난다.

 

값	의미	기본값
stretch	Container의 교차축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점으로 정렬
flex-end	Items를 끝점으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

 

 

align-items

교차축에 Items의 정렬 방법을 설정한다.

• Items가 한 줄일 경우 많이 사용한다.
• 주의할 점은 Items가 flex-wrap을 통해 여러줄일 경우에는 align-content 속성이 우선한다.
• 따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 한다.

 

값	의미	기본값
stretch	Container의 교차축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 각 줄의 시작점으로 정렬
flex-end	Items를 각 줄의 끝점으로 정렬
center	Items를 가운데 정렬
baseline	Items를 문자 기준선에 정렬

 

Flex Items

속성	의미
order	Flex Item의 순서를 설정
flex	flex-grow, flex-shrink, flex-basis 의 단축 속성
flex-grow	Flex Item의 증가 너비 비율을 설정
flex-shrink	Flex Item의 감소 너비 비율을 설정
flex-basis	Flex Item의 (공간 배분 전) 기본 너비 설정
align-self	교차축에서 Item의 정렬 방법을 설정

 

order

Item의 순서를 설정한다.

• Item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.
• 음수가 허용된다.
• HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용하다.
• 기본값: 0

 

flex

Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성이다.

• flex-grow(증가너비)를 제외한 개별 속성은 생략할 수 있다.
• 단축속성에서 flex-basis 의 값을 생략할 경우 기본값은 auto 가 아닌 0 이 적용된다.

 

값	의미	기본값
flex-grow	Item의 증가 너비 비율을 설정	0
flex-shrink	Item의 감소 너비 비율을 설정	1
flex-basis	Item의 (공간 배분 전) 기본 너비 설정	auto

 

flex: 증가너비 감소너비 기본너비;

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

 

- flex-grow

Item의 증가 너비 비율을 설정한다.

• 숫자가 크면 더 많은 너비를 가진다.
• Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.

 

- flex-shrink

Item이 감소하는 너비의 비율을 설정한다.

• 숫자가 크면 더 많은 너비가 감소한다.
• Item이 가변 너비가 아니거나, 값이 0일경우 효과가 없다.
• 계산이 까다롭기 때문에 활용도는 조금 떨어진다.

감소 너비는 요소의 너비에 영향을 받기 떄문에 계산하기 까다롭다.

영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미한다.

Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어든다.

 

예)

Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px 일 때

 

요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면,

감소 너비는 2:1 비율이며

첫번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고

두번째 Item은 90px의 1/3인 30px 만큼 너비가 감소한다.

 

요소 너비가 다른 Item이 2개이고 요소 너비는 각각 200과 100이고,

지정된 감소 너비가 각각 2와 1이라면,

200 x 2 = 400 과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,

첫번째 Item은 90px의 4/5인 72px 만큼 너비가 감소하고,

두번째 Item은 90px의 1/5인 18px 만큼 너비가 감소한다.

 

- flex-basis

Item의 (공간 배분 전) 기본 너비를 설정한다.

• 값이 auto 일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있다.
• 단위값(px, em, cm 등)이 주어질 경우 설정할 수 없다.
• flex 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의한다.

 

align-self

교차축에서 개별 Item의 정렬 방법을 설정한다.

• Container 내 모든 Items의 정렬 방법을 설정한다.
• 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self 를 사용할 수 있다.
• 이 속성은 align-items 속성보다 우선한다.

 

값	의미	기본값
auto	Container의 align-items 속성을 상속받음	auto
stretch	Container의 교차축을 채우기 위해 Item을 늘림
flex-start	Item을 각 줄의 시작점으로 정렬
flex-end	Item을 각 줄의 끝점으로 정렬
center	Item을 가운데 정렬
baseline	Item을 문자 기준선에 정렬