[CSS] flex 속성 정리

display

요소가 화면에 출력되는 특성을 정의해주는 속성이다.

 

display에서 자주 사용하는 속성값 6가지

• inline: 글자를 만들기 위한 요소에 부여하는 속성값으로 요소의 크기만큼 차지하며 수평으로 쌓인다
• block: 레이아웃을 만들기 위한 요소에 부여하는 속성값으로 한행을 전부 차지하며 수직으로 쌓인다
• inline-block: 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소
• grid: 그리드는 수평선과 수직선으로 이루어진 집합체로 웹페이지를 위한 이차원 레이아웃 모델
• table: 행과 열로 이루어진 표를 생성하는 레이아웃 모델
• flex: flex 속성을 가진 부모 요소 안에 있는 자식 요소를 자유롭게 제어할수 있도록 도와주는 레이아웃 모델

 

flex 기본

부모 요소가 block 요소일때

자식 요소가 block 요소이므로 모두 한 행을 차지해 수직정렬이 된다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: block;
}

 

부모 요소가 flex 요소일때

자식 요소가 block 요소이지만 한 행을 차지하지 못하고 수평정렬이 된다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

 

flex 속성

• container: 자식 요소을 감싸고 있는 부모 요소로 display: flex 속성을 반드시 가지고 있어야 자식 요소를 제어할 수 있다
• item: display: flex 속성을 가진 부모 요소에 감싸진 자식 요소

flex container에 부여할 수 있는 속성 정리

1. display: container에 속성값을 flex로 적용해 item 요소를 자유롭게 컨트롤한다
   1) flex: container가 block 요소가 되어 한행을 전부 차지하게 된다

   2) inline-flex: container가 inline 요소가 되어 item 요소의 크기만큼만 차지하게 된다

 

2. flex-direction: item 요소가 어떤 방향으로 나열될 것인지 정렬 방향(수평정렬 or 수직정렬)을 설정한다

   1) row: item 요소가 좌에서 우로 나열된다 (default)

   2) row-reverse: item 요소가 우에서 좌로 나열된다

   3) column: item 요소가 위에서 아래로 나열된다

   4) column-reverse: item 요소가 아래에서 위로 나열된다

 

3. flex-wrap: item 요소의 줄바꿈(묶음)을 설정한다

   1) no-wrap: 줄바꿈 없음 (default)

   2) wrap: 여러줄로 묶음

 

4. flex-flow: flex-direction과 flex-wrap을 합친 속성으로 첫번째 속성으로 flex-direction을 쓰고 두번째 속성으로 flex-wrap을 쓴다

 

5. justify-content: 수평정렬로 한줄이 된 item 요소를 어떻게 정렬할지 설정 (좌우 정렬 방법 설정)

   1) flex-start: item 요소를 시작점부터 정렬 (default)

   2) flex-end: item 요소를 끝점부터 정렬

   3) center: item 요소를 가운데로 정렬

   4) space-between: 첫번째와 마지막 item 요소를 시작점과 끝점에 위치시키고 모든 item 요소 사이의 공간을 균일하게 설정

   5) space-around: 첫번째 item과 시작점 사이의 공간과 마지막 item과 끝점 사이의 공간을 같게 만들어주고 나머지 item은 고르게 정렬

   6) space-evenly: container와 모든 item 요소의 공백을 균일하게 설정

 

6. align-items: 수평정렬로 한줄이 된 item 요소를 어떻게 정렬할지 설정 (item 요소가 한줄일때 적용되므로 flex-wrap의 속성이 wrap일 경우 적용이 되지 않는다) (item 요소가 한줄일때 위아래 정렬 방법 설정)

   1) stretch: container의 공간을 채우기 위해 item 요소의 높이를 늘림 (단, item 요소의 높이값이 auto일때만 늘어난다) (default)

   2) flex-start: 한줄로 된 item 요소가 시작점부터 정렬

   3) flex-end: 한줄로 된 item 요소가 끝점부터 정렬

   4) center: 한줄로 된 item 요소가 가운데로 정렬

   5) baseline: item 요소를 각 줄의 문자 기준선에 정렬

 

7. align-content: 수평정렬로 여러줄이 된 item 요소를 어떻게 정렬할지 설정 (item 요소가 여러줄일때 적용되므로 flex-wrap의 속성이 wrap이 되어야 한다) (item 요소가 여러줄일때 위아래 정렬 방법 설정)

   1) stretch: 교차축으로 줄 사이의 간격을 균등하게 벌어지게 정렬 (default)

   2) flex-start: 여러줄로 된 item 요소가 시작점부터 정렬

   3) flex-end: 여러줄로 된 item 요소가 끝점부터 정렬

   4) center: 여러줄로 된 item 요소가 가운데로 정렬

   5) space-between: 첫번째 item 줄은 시작점에, 마지막 item 줄은 끝점에 위치시킨 후 나머지 item 줄 사이의 공간을 균일하게 설정

   6) space-around: 첫번째 item 줄과 시작점 사이의 공간과 마지막 Item 줄과 끝점 사이의 공간을 같게 만들어주고 나머지 Item 줄은 고르게 정렬

 

flex item에 부여할 수 있는 속성 정리

1. order: flex item의 정렬 순서 설정

   1) 0: 순서 없음 (default)

   2) 숫자: 숫자가 작을 수록 먼저 위치한다

2. flex-grow: flex item의 증가 너비 비율

   1) 0: 증가 비율 없음 (default)

   2) 숫자: 증가 비율

3. flex-shrink: flex item의 감소 너비 비율

   1) 1: flex container 너비에 따라 감소 비율 적용 (default)

   2) 숫자: 감소 비율

4. flex-basis: flex item의 공간 배분 전 기본 너비

   1) auto: 요소의 content 너비 (default)

   2) 단위: px, em, rem 등 단위로 지정

 

1. display

flex 레이아웃을 적용하기 위해서는 반드시 부모 요소인 container와 자식 요소인 item이 있어야 하며 container에 display: flex 속성을 적용해 item 요소를 제어할 수 있다.

display 속성

1) flex

• container가 block 요소가 되어 한 행을 전부 차지하게 된다
• item 요소는 자동으로 수평정렬이 된다

.container {
  display: flex;
}

2) inline-flex

• container가 inline 요소가 되어 item 요소의 크기만큼만 차지하게 된다
• item 요소는 자동으로 수평정렬이 된다

.container {
  display: inline-flex;
}

 

2. flex-direction

item 요소가 어떤 방향으로 나열될 것인지 정렬 방향(수평정렬 or 수직정렬)을 설정한다.

flex-direction 속성

1) row (default)

item 요소가 좌에서 우로 나열된다 (수평정렬)

.container {
  display: flex;
  flex-direction: row;
}

2) row-reverse

item 요소가 우에서 좌로 나열된다 (수평정렬)

.container {
  display: flex;
  flex-direction: row-reverse;
}

3) column

item 요소가 위에서 아래로 나열된다 (수직정렬)

.container {
  display: flex;
  flex-direction: column;
}

4) column-reverse

item 요소가 아래에서 위로 나열된다 (수직정렬)

.container {
  display: flex;
  flex-direction: column-reverse;
}

 

3. flex-wrap: item 요소의 줄바꿈(묶음)을 설정한다

1) no-wrap (default)

item 요소들의 너비가 container의 너비보다 공간을 더 차지해도 줄바꿈 없이 item 요소의 크기를 줄여 한줄을 유지한다 (줄바꿈 없음)

.container {
  display: flex;
  flex-wrap: no-wrap;
}

2) wrap

item 요소의 크기를 그대로 유지한채 container의 너비가 부족하면 다른줄로 넘어간다 (줄바꿈 있음)

.container {
  display: flex;
  flex-wrap: wrap;
}

 

4. flex-flow

flex-direction과 flex-wrap을 합친 속성으로 첫번째 속성으로 flex-direction을 쓰고 두번째 속성으로 flex-wrap을 쓴다

.container {
  flex-flow: column wrap;
}

 

5. justify-content 

수평정렬로 한줄이 된 item 요소를 어떻게 정렬할지 설정 (좌우 정렬 방법 설정)

1) flex-start

item 요소를 시작점부터 정렬

.container {
  display: flex;
  justify-content: flex-start;
}

2) flex-end

item 요소를 끝점부터 정렬

.container {
  display: flex;
  justify-content: flex-end;
}

3) center

item 요소를 가운데로 정렬

.container {
  display: flex;
  justify-content: center;
}

4) space-between

첫번째와 마지막 item 요소를 시작점과 끝점에 위치시키고 모든 item 요소 사이의 공간을 균일하게 설정

.container {
  display: flex;
  justify-content: space-between;
}

5) space-around

첫번째 item과 시작점 사이의 공간과 마지막 Item과 끝점 사이의 공간을 같게 만들어주고 나머지 Item은 고르게 정렬

.container {
  display: flex;
  justify-content: space-around;
}

6) space-evenly

container와 모든 item 요소의 공백을 균일하게 설정

.container {
  display: flex;
  justify-content: space-evenly;
}

 

7. align-content

수평정렬로 여러줄이 된 item 요소를 어떻게 정렬할지 설정 (item 요소가 여러줄일때 적용되므로 flex-wrap의 속성이 wrap이 되어야 한다) (item 요소가 여러줄일때 위아래 정렬 방법 설정)

1) stretch (default)

교차축으로 줄 사이의 간격을 균등하게 벌어지게 정렬

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

2) flex-start

여러줄로 된 item 요소가 시작점부터 정렬

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

3) flex-end

여러줄로 된 item 요소가 끝점부터 정렬

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

4) center

여러줄로 된 item 요소가 가운데로 정렬

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

5) space-between

첫번째 item 줄은 시작점에, 마지막 item 줄은 끝점에 위치시킨 후 나머지 item 줄 사이의 공간을 균일하게 설정

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

6) space-around

첫번째 item 줄과 시작점 사이의 공간과 마지막 Item 줄과 끝점 사이의 공간을 같게 만들어주고 나머지 Item 줄은 고르게 정렬

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

 

6. align-items

수평정렬로 한줄이 된 item 요소를 어떻게 정렬할지 설정 (item 요소가 한줄일때 적용되므로 flex-wrap의 속성이 wrap일 경우 적용이 되지 않는다) (item 요소가 한줄일때 위아래 정렬 방법 설정)

1) stretch (default)

container의 공간을 채우기 위해 item 요소의 높이를 늘림 (단, item 요소의 높이값이 auto일때만 늘어난다)

.container {
  display: flex;
  align-items: stretch;
}

2) flex-start

한줄로 된 item 요소가 시작점부터 정렬

.container {
  display: flex;
  align-items: flex-start;
}

3) flex-end

한줄로 된 item 요소가 끝점부터 정렬

.container {
  display: flex;
  align-items: flex-end;
}

4) center

한줄로 된 item 요소가 가운데로 정렬

.container {
  display: flex;
  align-items: center;
}

5) baseline

item 요소를 각 줄의 문자 기준선에 정렬

.container {
  display: flex;
  align-items: baseline;
}

 

flex item에 부여할 수 있는 속성

1. order

flex item의 정렬 순서 설정

1) 0 (default)

순서 없음

2) 숫자

숫자가 작을 수록 먼저 위치한다

.container .item:nth-child(1) {
  order: 100;
}
.container .item:nth-child(3) {
  order: -1;
}
.container .item:nth-child(4) {
  order: 2;
}

2. flex-grow

container의 공간을 차지할때  flex item의 증가 너비 비율

1) 0  (default)

증가 비율 없음

2) 숫자

증가 비율

.container .item:nth-child(5) {
  flex-grow: 1;
}
.container .item:nth-child(6) {
  flex-grow: 2;
}

3. flex-shrink

container의 공간이 부족해질때 item의 감소 너비 비율

1) 1 (default)

container 너비에 따라 감소 비율 적용

.container .item {
  flex-shrink: 1;
}

2) 0

container의 너비가 감소해도 item은 그 너비를 유지한다

.container .item {
  flex-shrink: 0;
}

3) 숫자

감소 비율

 

4. flex-basis

flex item의 공간 배분 전 기본 너비

1) auto (default)

item이 요소의 content 너비만큼 차지

.container .item {
  flex-basis: auto;
}

flex-basis: auto 속성과 flex-grow 속성 같이 쓰기

.container .item {
  flex-basis: auto;
}
.container .item:nth-child(1) {
  flex-grow: 1;
}
.container .item:nth-child(2) {
  flex-grow: 1;
}
.container .item:nth-child(3) {
  flex-grow: 2;
}

flex-basis: 0 속성과 flex-grow 속성 같이 쓰기

.container .item {
  flex-basis: 0;
}
.container .item:nth-child(1) {
  flex-grow: 1;
}
.container .item:nth-child(2) {
  flex-grow: 1;
}
.container .item:nth-child(3) {
  flex-grow: 2;
}

 

2) 단위

px, em, rem 등 단위로 지정