CSS3 플렉스 (flex-direction, justify-content, align-items, flex-wrap, align-content)
2021. 6. 27. 23:48
728x90
플렉스 flex
- 플렉스 적용
display: flex;
플렉스 배치 flex-direction
- flex-direction: row;
기본 설정, 플렉스 요소는 왼쪽에서 오른쪽으로 그리고 위쪽에서 아래쪽으로 배치
- flex-direction: row-reverse;
플렉스 요소는 오른쪽에서 왼쪽으로 배치
- flex-direction: column;
플렉스 요소는 수직방향으로 위쪽에서 아래쪽으로 배치
- flex-direction: column-reverse;
플렉스 요소는 수직방향으로 아래쪽에서 위쪽으로 배치
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>플렉스</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
*{
margin: 0;
padding: 0;
}
.flex_container{
width: 900px;
border: 1px solid black;
padding: 10px;
}
.center{
font-family: Consolas;
text-align: center;
}
.left{
font-family: Consolas;
text-align: left;
}
.box{
width: 100px;
padding: 5px 45px;
margin: 5px;
background-color: darkblue;
color: white;
}
.flex_row{
display: flex;
margin: 10px;
flex-direction: row;
border: 5px solid red;
}
.flex_row_reverse{
display: flex;
margin: 10px;
flex-direction: row-reverse;
border: 5px solid yellow;
}
.flex_column{
width: 400px;
display: flex;
margin: 10px;
flex-direction: column;
border: 5px solid green;
}
.flex_column_reverse{
width: 400px;
display: flex;
margin: 10px;
flex-direction: column-reverse;
border: 5px solid purple;
}
</style>
</head>
<body>
<div class="flex_container">
<h1 class="center">row</h1>
<div class="flex_row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1 class="center">row-reverse</h1>
<div class="flex_row_reverse">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1 class="left">column</h1>
<div class="flex_column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1 class="left">column-reverse</h1>
<div class="flex_column_reverse">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
</body>
</html>
|
cs |
플렉스 요소의 수평 방향 정렬 방식 justify-content
- justify-content: flex-start;
기본 설정, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치
- justify-content: flex-end;
플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치
- justify-content: center;
플렉스 요소는 플렉스 컨테이너의 가운데에 배치
- justify-content: space-between;
플렉스 요소는 요소들 사이에만 여유공간을 두고 배치
- justify-content: space-around;
플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>플렉스</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
*{
margin: 0;
padding: 0;
}
.flex_container{
width: 900px;
border: 1px solid black;
padding: 10px;
font-family: Consolas;
text-align: center;
}
.box{
width: 10px;
padding: 5px 45px;
margin: 5px;
background-color: black;
color: white;
}
.flex_start{
display: flex;
margin: 10px;
justify-content: flex-start;
border: 5px solid red;
}
.flex_end{
display: flex;
margin: 10px;
justify-content: flex-end;
border: 5px solid yellow;
}
.flex_center{
display: flex;
margin: 10px;
justify-content: center;
border: 5px solid green;
}
.flex_space_between{
display: flex;
margin: 10px;
justify-content: space-between;
border: 5px solid blue;
}
.flex_space_around{
display: flex;
margin: 10px;
justify-content: space-around;
border: 5px solid purple;
}
</style>
</head>
<body>
<div class="flex_container">
<h1>flex-start</h1>
<div class="flex_start">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>flex-end</h1>
<div class="flex_end">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>center</h1>
<div class="flex_center">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>space-between</h1>
<div class="flex_space_between">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>space-around</h1>
<div class="flex_space_around">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
</body>
</html>
|
cs |
플렉스 요소의 수직 방향 정렬 방식 align-items
- align-items: stretch;
기본 설정, 플렉스 요소의 높이가 플ㄹ렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치
- align-items: flex-start;
플렉스 요소는 플레게스 컨테이너의 위쪽에 배치
- align-items: flex-end;
플렉스 요소는 플레게스 컨테이너의 아래쪽에 배치
- align-items: center;
플렉스 요소는 플레게스 컨테이너의 가운데에 배치
- align-items: baseline;
플렉스 요소는 플레게스 컨테이너 기준선(baseline)에 배치
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>플렉스</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
*{
margin: 0;
padding: 0;
}
.flex_container{
width: 900px;
border: 1px solid black;
padding: 10px;
font-family: Consolas;
text-align: center;
}
.box{
padding: 5px 45px;
margin: 5px;
background-color: black;
color: white;
}
.stretch{
height: 100px;
display: flex;
margin: 10px;
align-items: stretch;
border: 5px solid red;
}
.flex_start{
height: 100px;
display: flex;
margin: 10px;
align-items: flex-start;
border: 5px solid yellow;
}
.flex_end{
height: 100px;
display: flex;
margin: 10px;
align-items: flex-end;
border: 5px solid green;
}
.center{
height: 100px;
display: flex;
margin: 10px;
align-items: center;
border: 5px solid blue;
}
.baseline{
height: 100px;
display: flex;
margin: 10px;
align-items: baseline;
border: 5px solid purple;
}
</style>
</head>
<body>
<div class="flex_container">
<h1>stretch</h1>
<div class="stretch">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>flex_start</h1>
<div class="flex_start">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>flex_end</h1>
<div class="flex_end">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>center</h1>
<div class="center">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h1>baseline</h1>
<div class="baseline">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
</body>
</html>
|
cs |
플렉스 라인에 여유 공간이 없을 때 요소의 위치를 다음 줄로 넘김
flex-wrap
- flex-wrap: nowrap;
기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않음
- flex-wrap: wrap;
플렉스 요소가 여유 공간이 없다면 다음 줄로 넘어가서 배치
- flex-wrap: wrap-reverse;
플렉스 요소가 여유 공간이 없다면 다음 줄로 넘어가서 배치, 단 아래쪽이 아닌 위쪽으로 넘어감
<예제>
flex-wrap 속성의 동작을 변경 align-content
=> align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신 플렉스 라인을 정렬
- align-content: stretch;
기본 설정, 플렉스 라인의 높이가 남는 공간을 전부 차지
- align-content: flex-start;
플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉치게 됨
- align-content: flex-end;
플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉치게 됨
- align-content: center;
플렉스 라인은 플렉스 컨테이너의 가운데에 뭉치게 됨
- align-content: space-between;
플렉스 라인은 플렉스 컨테이너에 고르게 분포
- align-content: space-around;
플렉스 라인은 플렉스 컨테이너에 고르게 분포, 단 양쪽 끝에 약간의 공간을 남겨둠
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>플렉스</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
h1{
font-family: Consolas;
text-align: center;
}
.flex_row{
display: flex;
width: 500px;
height: 200px;
margin: 10px;
flex-flow: row wrap;
border: 1px solid black;
}
.box{
padding: 10px 20px;
width: 100px;
margin: 10px;
background-color: darkblue;
color: white;
font-size: 24px;
}
.align1{
align-content: stretch;
border: 5px solid red;
}
.align2{
align-content: flex-start;
border: 5px solid yellowgreen;
}
.align3{
align-content: flex-end;
border: 5px solid skyblue;
}
.align4{
align-content: center;
border: 5px solid red;
}
.align5{
align-content: space-between;
border: 5px solid yellowgreen;
}
.align6{
align-content: space-around;
border: 5px solid skyblue;
}
</style>
</head>
<body>
<h1>stretch</h1>
<div class="flex_row align1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<h1>flex-start</h1>
<div class="flex_row align2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<h1>flex-end</h1>
<div class="flex_row align3">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<h1>center</h1>
<div class="flex_row align4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<h1>space-between</h1>
<div class="flex_row align5">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<h1>space-around</h1>
<div class="flex_row align6">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
|
cs |
728x90
'CSS > Study' 카테고리의 다른 글
| [CSS] 미디어 쿼리 (media query, @media) (0) | 2021.06.27 |
|---|---|
| CSS3 플렉스 요소의 속성 (align-self, flex) (0) | 2021.06.27 |
| CSS3 그리드 (row-gap, column-gap, gap, grid-template-areas) (0) | 2021.06.27 |
| CSS3 그리드 (grid, grid-template-columns, grid-template-rows, repeat, minmax, auto-fill, auto-fit) (0) | 2021.06.27 |
| [CSS] 플로트 (float, clear, overflow) (0) | 2021.06.27 |
