> flexbox (flex 컨테이너)
- 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델.
- 1차원 모델 : 레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만 다루는 모델.
- 컨테이너에 'display: flex;' 를 적용해서 만들 수 있음.
- '주축(→/main-axis)'과 '교차축(↓/cross-axis)'이 존재함.
ex.
> flex 컨테이너가 되기 전
> flex 컨테이너가 된 상태
기본 마진 값을 무시하고 자신의 진행 방향대로 요소를 배치함. (기본값은 행방향)
> flex - direction 속성
- flexbox 내에 요소를 배치할 때 사용할 주축 및 방향을 지정하는 속성.
- row : 기본값. 주축은 행. 방향은 콘텐츠의 방향과 동일.
- row-reverse : 주축은 행. 방향은 콘텐츠의 방향과 반대.
- column : 주축은 열. 방향은 콘텐츠의 방향과 동일.
- column-reverse : 주축은 열. 방향은 콘텐츠의 방향과 반대.
ex.
> flexbox 관련 속성
- 주축 배치 방법 : justify-content
- 교차축 배치 방법 : align-items
- 교차축 개별요소 배치 방법 : align-self
- 줄 바꿈 여부 : flex-wrap
> justify - content 속성 예시
※ 전부 기본값인 상태
> align - items 속성 예시
> align - self 속성 예시
> flex - wrap 속성 예시
'CSS' 카테고리의 다른 글
| [CSS] 의사 클래스_ hover, active, focus, disabled, nth-child() (0) | 2023.11.06 |
|---|---|
| [CSS] 특성 선택자와 결합 선택자 (0) | 2023.11.06 |
| [CSS] position 속성에 대해서 (0) | 2023.11.02 |
| [CSS] background 속성에 대해서 (0) | 2023.11.02 |
| [CSS] padding 속성과 margin 속성 (0) | 2023.11.02 |