[개발] - Front/Mega-CSS
20. 플렉스 박스 레이아웃
완벽한 장면
2023. 6. 6. 10:27
플렉스 박스 레이아웃 용어
플렉스 박스 항목을 배치하는 속성
1) display : 플렉스 컨테이너를 지정하는 속성
- 플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 함.
- 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 한다.
- 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 한다.
속성값
2) flex-direction : 플렉스 방향을 지정하는 속성
- 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성.
속성값
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 Test1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width:700px;
display:flex; /* 플렉스 컨테이너 지정 */
background-color:blue;
border:1px solid #222;
margin-bottom:30px;
}
.box {
padding:5px 45px;
margin:5px;
width:80px;
background-color:pink;
}
#opt1{
flex-direction: row; /* 왼쪽에서 오른쪽으로 */
}
#opt2{
flex-direction: row-reverse; /* 오른쪽에서 왼쪽으로 */
}
#opt3{
flex-direction: column; /* 위에서 아래로 */
}
#opt4{
flex-direction: column-reverse; /* 아래에서 위로 */
}
p {
color:blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
</div>
<div class="container" id="opt3">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
</div>
<div class="container" id="opt4">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
</div>
</body>
</html>
실행 결과
3) flex-wrap : 플렉스 항목의 줄을 바꿈
- 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정
- 속성값으로 wrap이나 wrap-reverse로 지정한 후 웹 브라우저 화면의 너비를 늘리거나 줄여보면 플렉스 컨테이너의 너비에 따라 여러 줄로 표시됨.
속성값
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 Test2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width:700px;
display:flex; /* 플렉스 컨테이너 지정 */
background-color:blue;
border:1px solid #222;
margin-bottom:30px;
}
.box {
padding:5px 45px;
margin:5px;
width:80px;
background-color:pink;
}
#opt1{
flex-wrap: nowrap;
}
#opt2{
flex-wrap: wrap;
}
#opt3{
flex-wrap: wrap-reverse;
}
p {
color:blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
<div class="container" id="opt3">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
</body>
</html>
실행 결과
4) flex-flow : 배치 방향과 줄 바꿈을 한꺼번에 지정
- flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꿈
- 기본값은 row nowrap
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 Test3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width:700px;
display:flex; /* 플렉스 컨테이너 지정 */
background-color:blue;
border:1px solid #222;
margin-bottom:30px;
}
.box {
padding:5px 45px;
margin:5px;
width:80px;
background-color:pink;
}
#opt1{
flex-flow: row wrap;
}
#opt2{
flex-flow: row-reverse nowrap;
}
p {
color:blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
</body>
</html>
실행 결과
5) justify-content : 주축 정렬 방법을 지정하는 속성
- 주축에서 플렉스 항목 간의 정렬 방법을 지정
속성값
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 Test4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width:100%;
display:flex; /* 플렉스 컨테이너 지정 */
background-color:blue;
border:1px solid #222;
margin-bottom:30px;
}
.box {
padding:5px 45px;
margin:5px;
width:80px;
background-color:pink;
}
#opt1{
justify-content: flex-start;
}
#opt2{
justify-content: flex-end;
}
#opt3{
justify-content: center;
}
#opt4{
justify-content: space-between;
}
#opt5{
justify-content: space-around;
}
p {
color:blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt3">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt4">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt5">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
실행 결과
6) align-items : 교차축 정렬 방법을 지정하는 속성
- 교차축을 기준으로 플렉스 항목을 지정
속성값
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 Test5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width:100%;
height: 150px;
display:flex; /* 플렉스 컨테이너 지정 */
background-color:blue;
border:1px solid #222;
margin-bottom:30px;
}
.box {
padding:5px 45px;
margin:5px;
width:80px;
background-color:pink;
}
#opt1{
align-items: flex-start;
}
#opt2{
align-items: flex-end;
}
#opt3{
align-items: center;
}
#opt4{
align-items: baseline;
}
#opt5{
align-items: stretch;
}
p {
color:blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt3">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt4">
<div class="box"><p>1</p></div>
<div class="box"><p style="font-size: 14px;">2</p></div>
<div class="box"><p style="font-size: 25px;">3</p></div>
<div class="box"><p style="font-size: 10px;">4</p></div>
</div>
<div class="container" id="opt5">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
실행 결과
7) align-self : 특정 항목만 정렬 방법을 지정
- align-item 속성은 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정하지만
- 그 중에서 특정 항목만 지정하고 싶다면 align-self 속성을 사용
- 그래서 align-item 속성은 플렉스 컨테이너를 지정하는 선택자에서 사용하지만 align-self 속성은 플렉스 항목 선택자에서 사용
- align-self 속성에서 사용하는 값은 align-items 속성에서 사용하는 값과 동일하다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 박스 Test6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width:450px;
height:150px;
background-color:blue;
border:1px solid #222;
margin-bottom:20px;
display:flex; /* 플렉스 컨테이너 지정 */
align-items: center; /* 교차축의 중앙에 배치 */
}
.box {
padding:5px 45px;
margin:5px;
background-color:pink;
}
#box1 {
align-self: flex-start; /* 교차축의 시작점에 배치 */
}
#box3 {
align-self:stretch; /* 교차축에 가득 차게 늘림 */
}
p {
color:#fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box" id="box3"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
실행 결과
8) align-content : 여러 줄일 때 교차축 정렬 방법을 지정
- 주축에서 줄바꿈이 생겨서 플렉스 항목을 여러 줄로 표시할때 사용.
- 교차축에서 플렉스 항목 간의 간격을 지정할 수 있다.
속성값
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 Test7</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
float: left;
width:200px;
height: 150px;
display:flex; /* 플렉스 컨테이너 지정 */
flex-flow: row wrap;
background-color:blue;
border:1px solid #222;
margin:30px;
}
.box {
width:80px;
background-color:pink;
}
#opt1{
align-content: flex-start;
}
#opt2{
align-content: flex-end;
}
#opt3{
align-content: center;
}
#opt4{
align-content: space-between;
}
#opt5{
align-content: space-around;
}
#opt6{
align-content: stretch;
}
p {
color:blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt3">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt4">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt5">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt6">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
실행 결과
728x90
반응형