처음 웹 공부를 시작하면 가장 먼저 배우는 HTML과 CSS!
그 중에서 프로젝트를 해도 헷갈리는 Flexbox 개념을 정리하려고 한다 💥
CSS Flexbox는 웹 페이지의 레이아웃을 쉽게 만들고 관리할 수 있도록 도와주는 1차원 레이아웃 모델이다.
Flexbox를 사용하면 컨테이너 내에서 아이템의 배치, 정렬, 크기 조정을 간편하게 할 수 있다.
Flex 속성을 적용하기 위해서는 부모와 자식의 관계가 존재해야 한다.
Flex container → 부모
- flex-direction : 요소 배치 방향 선택 (row (default) / column / row-reverse / column-reverse)
- flex-wrap : 컨테이너 너비보다 아이템 너비가 클 때 줄바꿈을 결정하는 속성 (nowrap (줄바꿈 없음, overflow가능성 있음 - default) / wrap (아이템이 줄바꿈 ) / wrap-reverse(줄바꿈 역순))
- justify-content : 메인축 방향으로 정렬 (flex-start (default) / flex-end / space-between / center / space-around)
- align-items : 교차축 방향으로 정렬(block-axis) (normal(default) - flex-start in flexbox and grid / flex-end / center baseline (가상의 줄에 대한 맞춤) / stretch (컨테이너 안에 늘려짐))
- align-content : 교차축 방향으로 정렬. flex-wrap 속성을 통해 Items가 두줄 이상이고 여백이 있을 때만 사용 가능 한줄에서 사용하면 변화 없음!
- gap : item 간의 간격을 설정
Flex items → 자식
- order : item의 순서를 바꾸고 싶을 때 사용, 작은 숫자일 수록 먼저 배치
- flex-grow : 증가 너비 비율 (flexible item에서 나머지 flex item보다 얼마나 늘어날지 정함 ex) 1:2:1 )
- flex-shrink : 감소 너비의 비율 (flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성이 사용됨.)
- flex-basis : 기본적인 item의 크기 값
- flex : 너비(증가, 감소, 기본)를 설정하는 속성 ([flex-grow] [flex-shrink] [flex-basis])
- align-self : item 각각에 대한 속성을 주고 싶을 때 사용
예를 들어, 아래와 같은 HTML 코드에 CSS를 적용하고 싶다면
//index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>1주차 세미나</title>
</head>
<body>
<div id="parent">
<div class="child">box1</div>
<div class="child">box2</div>
<div class="child">box3</div>
</div>
</body>
</html>
아래와 같은 CSS 코드를 작성하여
//style.css
* {
box-sizing: border-box;
margin: 10px;
padding: 20px;
}
#parent {
width: 500px;
height: 300px;
display: flex;
flex-direction: column;
border: 5px solid purple;
}
.child {
flex: 1 0 auto;
border: 3px dotted orange;
}
다음과 같은 결과를 얻을 수 있다.
이를 통해 parent 에 크기에 맞추어 child 요소가 일정한 비율을 유지한 채 나타나는 것을 확인할 수 있었다!
또한 Flex의 CSS 적인 장점은 자식 요소가 추가되더라도 비율을 유지한다는 점에 있다.
추가적인 내용은 아래 공식문서를 통해 확인할 수 있다 🙏
'1주차' 카테고리의 다른 글
| [CSS] display 속성 - none, inline, block, inline-block (0) | 2024.10.10 |
|---|---|
| 스타일링 라이브러리 비교하기 (0) | 2024.10.10 |
| 공유과제#1. White space (CSS) (0) | 2024.10.10 |
| 웹 접근성 향상을 위한 rem (1) | 2024.10.09 |
| 메타 태그를 통한 검색엔진 최적화(SEO) feat: 네이버 메타 태그 뜯어보기 (1) | 2024.10.09 |
