justify-content - 기본 축으로 정렬하기
- justify-content
- flex-start : 자식 요소에 시작 방향으로 정렬
- flex-end : 자식 요소를 종료 방향으로 정렬
- center : 자식 요소를 가운데 정렬
- space-between : 자식 요소의 좌우 여백만 균일하게 정렬
- space-around : 자식 요소의 여백을 균일하게 정렬
- space-evenly : 자식 요소의 여백을 양끝까지 균일하게 정렬
See the Pen content by 신범식 (@ulqsqjpw-the-solid) on CodePen.
align-content, align-items - 반대 축으로 정렬하기
- align-content은 자식 요소가 여러 개라서 줄 바꿈이 필요할 때 사용 align-items : 자식 요소가 1개이거나 줄 바꿈이 필요 없을 때 사용
- 속성값은 justify-content 와 같음
'FE > 인터렉티브 웹' 카테고리의 다른 글
| 요소의 여백 비율 지정하기 (0) | 2023.10.12 |
|---|---|
| 자식 요소의 순서 지정하기 (0) | 2023.10.10 |
| 부모 요소에 flex 적용하기 (0) | 2023.10.08 |
| 화면 너비에 따라 웹 페이지 디자인 변경하기 (0) | 2023.10.07 |
| 벡터 이미지 파일 제어하기 (0) | 2023.10.06 |