고정 헤더 영역
상세 컨텐츠
본문
Flexable Box / Flex Box
박스를 가변적으로 만들어주고, 동시에 반응형웹을 위한 몇가지 기능도 제공해주는 최신 기술이다.
Container 과 Item이 필수적으로 존재하며, Item이 Container 안에 들어있게 된다.
- container box는 display, flex-flow, justify-content 등 속성을 사용
- item box는 order, flex, align-self 등 속성을 사용
가변 그리드, 인라인/블록, float 속성을 이용하는 레이아웃 방식솨 비교되는 플렉스 박스만 가지고 있는 장점이 있다
- 콘텐츠를 수직 방향으로 쉽게 중앙 정렬
- 뷰 포트의 너비에 따라 요소의 배치 순서
- 박스 내 요소의 여백과 배치를 자동으로 조절할 수 있다 등이다.
flex-direction의 속성 값 설명
row 기본 값, 플렉스 박스의 아이템을 수평 방향으로 배치(좌->우)
row-reverse 속성 값 row와 동일하나 배치 순서가 반대임(좌<-우)
column 플렉스 박스의 아이템을 수직 방향으로 배치
column-reverse 속성 값 column과 동일하나 배치 순서가 반대임
플렉스 박스에서 아이템 배치하기
CSS의 justify-content 속성으로 플렉스 박스에서 아이템을 배치하는 방법을 지정할 수 있다.
display : flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {display : flex; /* 중앙 배치 flex */
height : 200px;
border : solid 3px red;}
.items {width : 100%;
height : 150px;}
.items:first-child {background-color :purple;}
.items:nth-child(2) {background-color : pink;}
.items:last-child {background-color :orange;}
</style>
</head>
<body>
<div class="container">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</body>
</html>
flex-direction : column
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {display : flex; /* 수평 방향으로 한다 flex */
flex-direction : column; /* 가로 나열을 세로 나열로 바꿈 */
height : 200px;
border : solid 3px red;}
.container div {width : 50%; height : 80%;}
.container div:first-child {background-color : lightgreen;}
.container div:nth-child(2) {background-color : yellow;}
.container div:last-child {background-color : lightblue;}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
플렉스 박스에 아이템 배치
CSS의 justify-content 속성은 플렉스 박스에서 아이템을 배치하는데 사용된다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flexbox {display : flex; height : 80px; border : solid 3px red;}
#container1 {justify-content : flex-start;} /* 좌측정렬 */
#container2 {justify-content : flex-end;} /* 우측정렬 */
#container3 {justify-content : center;} /* 중앙정렬 */
#container4 {justify-content : space-between;}
/* item의 첫번째와 마지막은 벽에 붙고, item 끼리의 공백을 균등하게 여백 배치 */
#container5 {justify-content : space-around;}
/* item의 첫번째와 마지막이 벽에 붙지 않고, item 끼리의 공백을 균등하게 배치하는데,
첫번째와 마지막 공백은 item 끼리의 공백의 반이다. */
.item1:first-child {width :20%; height : 60px; background-color : red;}
.item2:nth-child(2) {width :20%; height : 60px; background-color : green;}
.item3:nth-child(3) {width :20%; height : 60px; background-color : blue;}
</style>
</head>
<body>
<div class="flexbox" id="container1">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<div class="flexbox" id="container2">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<div class="flexbox" id="container3">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<div class="flexbox" id="container4">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<div class="flexbox" id="container5">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
'FrontEnd > HTML 반응형 웹' 카테고리의 다른 글
| 포토 스튜디오 (예제) (0) | 2022.06.27 |
|---|---|
| Variable 가변 이미지 (width, max-width) (0) | 2022.06.26 |
| media query (다른 기기에서는 다른 화면 전환) (0) | 2022.06.26 |
| 12열_그리드_시스템, [class*="col_"], [attribute*=value] (0) | 2022.06.26 |
| 반응형 웹 폰트 (em, rem) (0) | 2022.06.26 |
