CSS 플렉스박스
1
2
삼
4
5
6
7
8
CSS Flexbox 레이아웃 모듈
Flexbox 레이아웃 모듈 이전에는 네 가지 레이아웃 모드가 있었습니다.
- 차단, 웹 페이지 섹션용
- 인라인, 텍스트용
- 테이블, 2차원 테이블 데이터용
- 위치 지정, 요소의 명시적 위치
Flexible Box Layout Module을 사용하면 플로트 또는 위치 지정을 사용하지 않고 유연한 반응형 레이아웃 구조를 보다 쉽게 설계할 수 있습니다.
브라우저 지원
flexbox 속성은 모든 최신 브라우저에서 지원됩니다.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
플렉스박스 요소
Flexbox 모델을 사용하려면 먼저 플렉스 컨테이너를 정의해야 합니다.
1
2
삼
위의 요소는 3개의 플렉스 항목이 있는 플렉스 컨테이너(파란색 영역)를 나타냅니다.
예시
세 가지 플렉스 항목이 있는 플렉스 컨테이너:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
다음 장에서 플렉스 컨테이너와 플렉스 아이템에 대해 더 배울 것입니다.