CSS - flex

정의

CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다.

---

css 속성

1. flex 
    - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 

2. flex-direction 
    - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 

3. flex-shrink 
    - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소

4. flex-basis 
    - 플렉스 아이템의 초기 크기를 지정

5. flex-flow 
    - flex-direction, flex-wrap 속성의 단축 속성

6. flex-wrap 
    - flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성

7. flex-grow 
    - flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언

8. order 
    - 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정

---

정렬 속성

1. justify-content

2. align-content

3. align-items

4. align-self

5. place-content

6. place-items

7. row-gap

8. column-gap

9. gap

---

기본 문법

.test-class {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

---