[CSS] flex

원서연·2023년 11월 5일

flex 사용 연습

flex 개구리
- flex에 대한 설명과 게임을 통한 연습으로, flex 사용을 익히기에 좋다.
flex 디펜스
- 영어로 된 설명, 게임을 통한 연습으로 flex 사용을 익히기에 좋다.
- 내용 자체는 "flex 개구리"를 넘는 것은 없어서, 바로바로 문제를 풀어보면 된다.
- ★ main axis, cross axis 설명은 보는 게 좋다.
flex playground
- 속성 값을 변경하면서 테스트 해보는 사이트
- 값 변경을 하면 바로 결과가 보여서, 각 속성 및 속성값을 이해하기 좋다.
"이번에야 말로 css flex를 익혀보자"
- 위 3가지를 모두 진행한 후에 읽어보도록 한다.
- 외부자료인데 굉장히 좋은 자료. flex에 대한 완전한 메뉴얼 같은 것
- flex에 대해 정리가 아주 잘 되어있다.
- flex- shrink 부터 보면 됨

display: flex;

style 속성에서 display 속성을 flex로 설정하면 컨테이너 안의 요소들의 가로, 세로 정렬을 자유롭게 할 수 있다.
가로, 세로 정렬뿐만 아니라 가운데, 거꾸로, 간격 정렬 등 여러 가지 정렬이 가능하다.
display: flex; 속성 설정과 함께 다른 속성들을 설정함으로써 자유롭게 정렬을 할 수 있다.

#pond {
    display: flex;
    align-items: flex-start;
}

.yellow {
    align-self: flex-end;
}

Style 속성

justify-content : 컨테이너 내부 요소들을 가로선 상(main축)에서 정렬
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬(시작점)
  - default
- flex-end : 요소들을 컨테이너의 오른쪽으로 정렬(끝점)
- center : 요소들을 컨테이너의 가운데로 정렬
- space-between : 요소들 사이에 동일한 간격
- space-around : 요소들 주위에 동일한 간격
- space-evenly : 요소들 주위와 양 끝에 동일한 간격
  - MS계열 브라우저(엣지, IE)에서는 지원 안됨
```
#pond {
    display: flex;
    justify-content: flex-end;
 }
```
align-items : 컨테이너 내부 요소들을 세로선 상(cross축)에서 정렬
- flex-start : 요소들을 컨테이너의 꼭대기로 정렬(시작점)
- flex-end : 요소들을 컨테이너의 바닥으로 정렬(끝점)
- center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
- baseline : 요소들을 텍스트 베이스 라인을 기준으로 정렬
- stretch : 요소들을 컨테이너에 맞도록 늘립니다.
  - default
```
#pond {
     display: flex;
     align-items: flex-end;
 }
```
flex-direction : 컨테이너 내부 요소들의 정렬 방향 지정
- row : 요소들을 텍스트의 방향과 동일하게 정렬
  - default
- row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
- column : 요소들을 위에서 아래로 정렬
- column-reverse : 요소들을 아래에서 위로 정렬
```
#pond {
    display: flex;
    flex-direction: column;
 }
```
order : 컨테이너의 요소들의 row나 column의 순서를 설정
- 개별 요소에 적용하는 속성
- 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.
- ex) 5개 요소가 있고, 2개를 1로 설정할 경우
  - 0, 0, 0, 1, 1 과 같은 원리로, 1로 설정한 2개는 맨 오른쪽에 위치한다.
```
#pond {
     display: flex;
 }

 .red {
     order: -1;
 }
```
align-self : 컨테이너 내부 요소들을 세로선 상에서 정렬
- 개별 요소에 적용하는 속성
- 기본값 : auto
- align-items가 사용하는 속성값들을 사용
- flex-start : 요소들을 컨테이너의 꼭대기로 정렬
- flex-end : 요소들을 컨테이너의 바닥으로 정렬
- center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
- baseline : 요소들을 컨테이너의 시작 위치에 정렬
- stretch : 요소들을 컨테이너에 맞도록 늘립니다.
```
#pond {
     display: flex;
     align-items: flex-start;
 }

 .yellow {
     align-self: flex-end;
 }
```
flex-wrap : 컨테이너의 요소들을 "한 줄" 또는 "여러 줄"에 정렬.
- nowrap : 모든 요소들을 한 줄에 정렬
  - default
- wrap : 요소들을 여러 줄에 걸쳐 정렬
- wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬
```
#pond {
    display: flex;
    flex-wrap: wrap;
}
```
flex-flow : flex-direction과 flex-wrap "두 속성"의 값들을 인자로 받습니다.
- ex) row wrap : 요소들을 가로선 상의 여러줄에 걸쳐 정렬
- ex) column wrap : 요소들을 세로선 상의 **여러줄에 걸쳐 정렬
- 기본 값 : row nowrap
```
#pond {
    display: flex;
    flex-flow: column wrap;
 }
```
align-content : 컨테이너 요소들에 대한 여러 줄 사이의 간격을 지정

즉 flex-wrap: wrap;과 함께 사용될 것이다.
- flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
- flex-end : 여러 줄들을 컨테이너의 바닥에 정렬합니다.여러 줄들을 세로선 상의 가운데에 정렬합니다.
- center : 여러 줄들을 세로선 상의 가운데에 정렬합니다.
- space-between : 여러 줄들 사이에 동일한 간격을 둡니다.
- space-around : 여러 줄들 주위에 동일한 간격을 둡니다.
- stretch : 여러 줄들을 컨테이너에 맞도록 늘립니다.
  - default
- align-items, align-content 비교
  - align-items : 컨테이너 안의 요소들에 대한 세로선 상 정렬(기본적인 정렬)
  - align-content : 여러 줄들 사이의 간격을 지정. 한 줄만 있는 경우 효과 없음.
    
    align-items, align-content 둘 중 하나만 적용이 됨
```
#pond {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
```
flex-grow : 컨테이너 크기에 맞추면서 확장되는 비중을 설정
- 개별 요소에 적용하는 속성
- 컨테이너에서 남는 공간을 채우면서 개별 요소 크기를 확장시킨다.
- 속성 값 : 양의 정수
  - 기본 값은 0으로 기본적으로 남는 공간을 채우지 않는다.
  - 속성 값을 1 이상으로 지정해서 남는 공간을 채울 수 있다.
```
// 컨테이너에서 남는 공간을 클래스 aaa와 bbb가 1:3 비율로 가져감
.aaa { flex-grow: 1; }
.bbb { flex-grow: 3; }
```
flex-shrink : 컨테이너 크기에 맞추면서 축소되는 비중을 설정
- 개별 요소에 적용하는 속성
- 컨테이너를 초과하는 크기를 비중에 따라 개별 요소 크기를 축소시킨다.
- 속성 값 : 양의 정수
  - 기본 값은 1로서 기본적으로 동일한 비율로 축소한다.
  - 속성 값을 0으로 지정해서 축소되지 않게 할 수 있다.
```
// 컨테이너를 초과하는 크기를 클래스 aaa와 bbb가 1:3 비율로 축소함.
.aaa { flex-shrink: 1; }
.bbb { flex-shrink: 3; }
```
flex-grow와 flex-shrink 둘은 동시에 설정될 일은 없음.
컨테이너의 크기보다 내부 요소들이 작거나 클 때 사용하는 것이라,
두 상황이 양립할 수 없음.
flex-basis : 개별 요소의 기본 크기를 지정.
- 개별 요소에 적용하는 속성
- px, em, % 등의 단위 또는 auto 값을 가질 수 있다.
- 기본 값 : auto
- 여기서는 퍼센티지(%)로 설정하는 방법을 정리한다.
  - 컨테이너 크기를 기준으로 퍼센티지(%)로 개별 요소의 크기를 설정
  - 속성 값 : 양의 정수
```
// 컨테이너 크기의 10%, 30% 로 클래스 aaa, bbb의 크기를 설정
.aaa { flex-basis: 10; }
.bbb { flex-basis: 30; }
```

z-index

z-index로 Z축 정렬. 숫자가 클 수록 위로 올라옴

.bbb {
    z-index: 1;
    transform: scale(2);
 }
 /* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

main axis, cross axis

flex-direction의 속성 값이 row/row-reverse일 때, main-axis는 가로선, cross-axis는 세로선이다.

flex-direction의 속성 값이 column/column-reverse일 때, main-axis는 세로선, cross-axis는 가로선이다.

justify-content가 가로선 정렬이라고 했는데, 사실 main축 정렬이다.
- flex-direction이 row일 때, main축이 가로선이라서 가로선 정렬이라고 하는 것
- flex-direction이 column이면, justify-content는 세로선 정렬이다.(main축 정렬인 건 동일)
align-items는 세로선 정렬이라고 했는데, 사실 cross축 정렬이 정확하다.
- flex-direction이 row일 때, cross축이 세로선이므로 세로선 정렬이라고 하는 것
- flex-direction이 column이면, align-items는 가로선 정렬이다.(cross축 정렬인 건 동일)