CSS CSS Flexbox 플렉스 박스 / flex / align-self / gap
페이지 정보
작성자 모던DS
조회 65회
조회 65회
본문
CSS Flexbox 플렉스 박스 레이아웃
자식 요소(Items) 세부 조절
부모의 규칙 안에서 개별 아이템의 크기를 조절합니다.
크기 비율 (flex)
남은 공간을 얼마나 더 차지할지 결정합니다. flex-grow flex-shrink flex-basis flex
| 속성 | 설명 |
| flex-basis | 플렉스 항목의 기본 크기 |
| flex-grow | 남은 공간을 채우기 위해 플렉스 항목을 늘림 |
| flex-shrink | 공간이 부족할 경우 플렉스 항목을 줄임 |
| flex | 앞의 3가지 속성을 한꺼번에 지정 |
flex-basis와 flex-grow, flex-shrink를 한꺼번에 지정
flex : m
flex-grow: m, flex-shrink: 1, flex-basis: 0 (flex-basis: 0 => 확장/축소하는 상황에 따라 기본 크기가 달라짐)
flex : m, n
첫번째 숫자 m은 flex-grow 값
두번째 숫자 n에 단위가 있다면 flex-basis 값, 단위가 없다면 flex-shrink 값
| 속성 사용 예시 | 실제 적용 값 |
| flex: 1; | flex-grow: 1, flex-shrink: 1, flex-basis: 0 |
| flex: 3; | flex-grow: 3, flex-shrink: 1, flex-basis: 0 |
| flex: 0 1 auto; | flex-grow: 0, flex-shrink: 1, flex-basis: auto |
| flex: 1 300px; | flex-grow: 1, flex-shrink: 1, flex-basis: 300px |
개별 정렬 (align-self)
특정 아이템 하나만 위치를 다르게 하고 싶을 때 사용합니다. align-self: flex-start align-self: center align-self: flex-end
특정 플렉스 항목의 정렬 방법을 개별적으로 지정할 때 사용하는 속성입니다.
| 속성값 | 설명 |
| auto | 부모 요소의 align-items 값을 사용해 정렬합니다. 기본값 |
| normal | 레이아웃 형태나 브라우저에 따라 다르게 정렬 |
| flex-start | 플렉스 컨테이너의 시작점에 맞춰 정렬 |
| flex-end | 플렉스 컨테이너의 끝점에 맞춰 정렬 |
| self-start | 플렉스 항목의 시작 위치에 맞춰 정렬. 텍스트 포함 시 언어 방향에 따라 결정됨 |
| self-end | 플렉스 항목 자체의 끝에 맞춰 정렬. 텍스트 포함 시 언어 방향에 따라 결정됨 |
| baseline | 플렉스 항목에 있는 텍스트 기준선에 맞춰 정렬 |
| center | 플렉스 컨테이너의 가운데로 정렬 |
| stretch | 플렉스 컨테이너의 높이에 가득 차게 늘려서 정렬 |
간격
플렉스 항목 간격 설정 (gap)
플렉스 컨테이너 안에 있는 플렉스 항목들 간의 간격
인접한 항목이 있을 경우에만 간격이 생김 (margin과의 차이점)
플렉스 컨테이너에서 적용
row-gap과 column-gap으로 나누어 사용할 수도 있음
| 종류 | 설명 |
| gap | 가로(row-gap)와 세로(column-gap) 간격을 동시에 지정합니다. (예: gap: 20px;) |
| row-gap | 행과 행 사이(세로 간격)를 지정합니다. |
| column-gap | 열과 열 사이(가로 간격)를 지정합니다. |
- 이전글CSS 그리드 레이아웃 (Grid Layout) 기초설명 26.02.27
- 다음글CSS Flexbox 플렉스 박스 / justify-content / align-items 26.02.26