😮 Flex

본인을 위해 작성하는 게시글이기 때문에 간단하게 사용법만 정리하겠습니다.

🙂 용어 정리

• 메인축: 기준이 되는 축
• 교차축: 기준이 되는 축의 반대 축
• flex-box: display: flex를 적용한 태그를 의미합니다.

😮 Flex-Box에 적용하는 속성들

1. inline-flex

flex를 inline형태로 적용시킨 것입니다.

예를 들면 <div>같은 경우에는 display: block이므로 한 줄 전체를 차지합니다.
display: flex은 flex-box상태로 display: block처럼 한 줄 전체를 차지합니다.
하지만 display: inline-flex같은 경우에는 inline-block처럼 본인 크기만큼만 width를 차지하게 된다.

2. flex-direction

플렉스박스의 메인축을 결정합니다. ( 정렬 방향을 지정 )

• 속성
  1. row: 좌측 -> 우측 ( 기본값 )
  2. row-reverse: 우측 -> 좌측
  3. column: 위 -> 아래
  4. column-reverse: 아래 -> 위

.flex-box {
  display: flex;
  flex-direction: row;
  flex-direction: column;
  flex-direction: row-reverse;
  flex-direction: column-reverse;
}

3. flex-wrap

flex-box의 줄넘김 처리를 결정합니다. ( 박스의 크기보다 아이템들의 크기가 더 클 경우 )

• 전체 조건: flex-box의 크기보다 아이템들의 크기가 더 클 경우
  1. nowrap: 아이템의 높이를 높임 ( 기본값 )
  2. wrap: 아이템을 다음 라인으로 넘김
  3. wrap-reverse: 아이템을 역순으로 다음 라인으로 넘김

.flex-box {
  display: flex;
  flex-wrap: nowrap;
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}

4. flex-flow

flex-direction과 flex-flow의 축약 문법입니다.

.flex-box {
  display: flex;
  flex-flow: row nowrap;
}

5. justify-content / align-content

메인축/교차축 기준으로 정렬 방법을 결정하는 속성입니다.

• align-content의 경우 flex-flow: row wrap;같은 상태일 때
  아이템의 배치는 가로로 배치되지만 길이가 길어서 세로로 나눠질 때 정렬 기준을 결정하는 속성입니다.

flex-direction: row일 경우 시작점은 좌측
flex-direction: column일 경우 시작점은 위

아래 설명은 flex-direction: row를 기준으로 정리하겠습니다.

• 속성

1. stretch: 모두 동일한 비율의 크기를 가지고 늘어남 ( 기본값 )
2. flex-start: 아이템들을 크기에 맞게 쌓아서 좌측에 붙임
3. center: 전체 width에서 아이템을 나열하고 전체의 중간과 배치한 아이템들의 중간의 위치를 동일하게 만듦
4. flex-end: 아이템들을 크기에 맞게 쌓아서 우측에 붙임
5. space-between: 아이템들을 좌측, 우측 끝에 붙여서 동일한 간격으로 떨어트림
6. space-around: 아이템들을 모두 각각 동일한 간격을 가짐
7. space-evenly: 아이템들을 중복된 간격을 제외하고 동일한 간격으로 떨어트림

.flex-box {
  display: flex;
  justify-content: flex-start;
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

6. align-items

교차축 기준으로 정렬 방법을 결정하는 속성입니다.

• 속성

1. stretch: 아이템이 전체 높이에 맞게 늘어남 ( 기본값 )
2. flex-start: 기본 높이만큼 가지고 시작 지점에 붙음
3. flex-end: 기본 높이만큼 가지고 끝 지점에 붙음
4. center: 기본 높이만큼 가지고 중간에 붙음
5. baseline: 텍스트의 아래 라인을 맞춰서 배치함

.flex-box {
  display: flex;
  align-items: stretch;
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}

😯 Flex-Item에 적용하는 속성들

1. flex-basis

아이템의 최소 크기를 결정합니다.

width와 다른점은 유연함에 있습니다.
flex-basis: 100px;은 100px을 초과할 경우 유연하게 본인 크기만큼 늘어나지만 width: 100px;는 정직하게 100px만큼만 차지합니다.

auto, px, rem, cm 등 단위 값 모두 사용 가능함

• 기본값 auto

.flex-box {
  display: flex;
}
.flex-item {
  flex-basis: auto;
  flex-basis: 100px;
}

2. flex-grow

아이템을 배치하고 난 뒤 남은 공간을 아이템이 가질 비율을 결정합니다.

일반적인 자연수가 들어가고 들어간 자연수의 비율을 만큼 남은 공간의 크기를 할당받는다.

• 남은 공간을 비율로 나눠서 할당받는 방식임을 주의해야 함
• 기본값 0

.flex-box {
  display: flex;
}
.flex-item:nth-child(1) {
  flex-grow: 1;
}
.flex-item:nth-child(2) {
  flex-grow: 2;
}

3. flex-shrink

아이템이 줄어드는 비율을 결정합니다.
기본값이 1이며 flex-grow과 반대 역할을 합니다.
아이템이 본인 원래 크기보다 작아지게 될 경우에 같은 flex-box의 아이템들의 flex-shrink값의 비율을 기준으로 작아지게 됩니다.

아이템이 본인의 원래 크기보다 작아지게 됐을 때 적용되는 방식이라 flex-wrap: nowrap이어야 유연한 결과를 볼 수 있습니다

.flex-box {
  display: flex;
  flex-basis: 300px;
}
.flex-box > li:nth-child(1) {
  background: red;
  flex-grow: 1;
  flex-basis: 300px;
  flex-shrink: 0;	/* 기본값 1 */
}
.flex-box > li:nth-child(2) {
  background: green;
  flex-grow: 1;
}

4. flex

flex-grow, flex-shrink, flex-basis의 축약 문법

flex-basis 생략할 경우에는 0%가 기본값으로 적용된다.

.flex-box {
  display: flex;
  flex-basis: 300px;
}
.flex-box > li:nth-child(1) {
  background: red;
  flex: 1 0 300px;	/* 아래 3개의 축약 문법 */
  flex-grow: 1;		/* 기본값 0 */
  flex-shrink: 0;	/* 기본값 1 */
  flex-basis: 300px;	/* 기본값 auto */
}
.flex-box > li:nth-child(2) {
  background: green;
  flex-grow: 1;
}

5. align-self / justify-self

align-items, justify-content의 개인 속성을 지정함

👇 참고한 사이트

• 1분 코딩 - Flex