css flex에 대하여 알아보도록 하자.
codepen 예제들을 활용하여 연습해 보세요 실무에서 복붙 하려고 만들어 보았습니다.
🥠 display
| Value | Use | Default |
|---|
| flex | block 특성의 flex container | |
| inline-flex | inline, inline-block 특성의 flex container | |
🥠 flex-direction
| Value | Use | Default |
|---|
| row | flex-item을 수평으로 정렬 | row |
| row-reverse | flex-item을 수평의 반대축으로 정렬 | |
| column | flex-item을 수직으로 정렬 | |
| column-reverse | flex-item을 수직의 반대축으로 정렬 | |
🥠 flex-wrap
| Value | Use | Default |
|---|
| nowrap | flex-item을 한줄로 정렬 | nowrap |
| wrap | flex-item을 여러줄로 정렬 | |
| wrap-reverse | flex-item을 여러줄의 역방향으로 정렬 | |
🥠 justify-content
| Value | Use | Default |
|---|
| flex-start | flex-item을 수평 시작점으로 정렬 | flex-start |
| flex-end | flex-item을 수평 끝점으로 정렬 | |
| center | flex-item을 수평 가운데 정렬 | |
| space-between | flex-item의 first는 수평 시작점 last는 수평 끝점 으로 하고 간격을 동일하게 정렬 | |
| space-around | flex-item의 수평 간격을 고르게 하여 정렬 | |
🥠 align-content
flex-wrap 속석을 통해 flex-item이 두줄 이상일 경우만 사용 가능
flex-item이 한줄일 경우 align-items 사용
| Value | Use | Default |
|---|
| stretch | flex-wrap의 수직을 채우기 위해 flex-item을 늘림 | stretch |
| flex-start | flex-item을 수직 시작점으로 정렬 | |
| flex-end | flex-item을 수직 끝점으로 정렬 | |
| center | flex-item을 수직 가운데 정렬 | |
| space-between | flex-item의 first는 수직 시작점 last는 수직 끝점 으로 하고 간격을 동일하게 정렬 | |
| space-around | flex-item의 수직 간격을 고르게 하여 정렬 | |
🥠 align-items
주의할 점은 flex-items이 flex-wrap을 속성에 의해 2줄 이상일 경우에는 align-content 속성이 우선합니다.
align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.
| Value | Use | Default |
|---|
| stretch | flex-wrap의 수직을 채우기 위해 flex-item을 늘림 | stretch |
| flex-start | flex-item을 각 줄의 수직 시작점으로 정렬 | |
| flex-end | flex-item을 각 줄의 수직 끝점으로 정렬 | |
| center | flex-item을 각 줄의 수직 가운데 정렬 | |
| baseline | flex-item의 각 줄의 문자 기준선에 정렬 | |
🥠 align-self
align-items 속성보다 우선합니다.
| Value | Use | Default |
|---|
| auto | flex-wrap의 align-items 속성을 상속 | auto |
| stretch | flex-wrap의 수직을 채우기 위해 flex-item을 늘림 | |
| flex-start | flex-item을 각 줄의 수직 시작점으로 정렬 | |
| flex-end | flex-item을 각 줄의 수직 끝점으로 정렬 | |
| center | flex-item을 각 줄의 수직 가운데 정렬 | |
| baseline | flex-item의 각 줄의 문자 기준선에 정렬 | |
🥠 order
| Value | Use | Default |
|---|
| number | flex-wrap의 순서 정렬 | 0 |
🥠 flex
flex: flex-grow , flex-shrink, flex-basis;
flex-grow를 제외한 개별 속성은 생략 가능
| Value | Use | Default |
|---|
| flex-grow | flex-wrap의 증가 너비 비율을 설정 | 0 |
| flex-shrink | flex-wrap의 감소 너비 비율을 설정 | 1 |
| flex-basis | flex-wrap의 (공간 배분 전) 기본 너비 설정 | auto |
🥠 ex) layout-1
