Study/HTML, CSS
[CSS] flex (2)
짤랑쓰
2023. 4. 19. 22:35
flex-wrap
:플렉스 아이템들의 너비가 부모 요소인 플렉스 박스보다 클 경우 넘치는 요소를 교차축 방향으로 쌓을지 결정하는 속성.
사용예시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-wrap</title>
<style>
.parent {
width: 500px;
margin: 20px;
border: 1px solid;
display: flex;
flex-wrap: nowrap;
}
.parent div {
width: 300px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
}
.wrap {
flex-wrap: wrap;
}
</style>
</head>
<body>
<h2>flex-wrap:nowrap</h2>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
<h2>flex-wrap:wrap</h2>
<div class="parent wrap">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
justify-content
: 주축에서 플렉스 아이템을 배치하는 속성
사용예시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content</title>
<style>
.parent {
width: 500px;
margin: 20px;
border: 1px solid;
display: flex;
justify-content: space-between;
}
.parent div {
width: 50px;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
align-items
:교차축에서 플렉스 아이템을 배치하는 속성
특징
- 기본값은 flex-strech로서 부모요소의 세로 길이가 지정되어 있다면 해당 높이에 맞춰 모든 요소들의 높이가 늘어난다.
- 높이가 지정되어 있지 않다면 플렉스 아이템 중 세로 높이가 가장 큰 요소에 맞춰 나머지 요소들의 높이가 늘어난다.
사용예시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items</title>
<style>
.parent {
width: 500px;
height: 400px;
margin: 20px;
border: 1px solid;
display: flex;
align-items: center;
}
.parent div {
width: 50px;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
align-content
: justify-content의 세로 버전(교차축 버전)
사용예시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content</title>
<style>
.parent {
width: 500px;
height: 400px;
margin: 20px;
border: 1px solid;
display: flex;
flex-wrap: wrap; /* 넘치는 요소를 아래로 쌓이도록 한다.*/
align-content: space-between;
}
.parent div {
width: 100%;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
order
:플렉스 아이템에 설정하는 속성으로 아이템이 화면에 나타나는 순서를 변경한다.
특징
- HTML 코드는 수정하지 않고 CSS만으로도 순서를 변경할 수 있어 반응형에서 특히 유용한 속성이다.
- order 속성의 값은 양수, 음수 모두 적용할 수 있고 같은 값을 지정하면 HTML 작성 순서로 화면에 표시된다.
- order 속성의 값이 작을수록 먼저 표시된다.(음수로 지정된 요소가 가장 앞에 배치됨)
사용예시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order</title>
<style>
.parent {
width: 600px;
display: flex;
}
.parent div {
width: 200px;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
text-transform: uppercase;
}
.parent div:nth-child(1){
order: 2;
}
.parent div:nth-child(2){
order: 3;
}
.parent div:nth-child(3){
order: 1;
}
</style>
</head>
<body>
<h1>order</h1>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
플렉스 박스에 여백이 생겼을 때 플렉스 아이템의 크기를 어떻게 늘려서 빈 여백을 채울 지를 결정하는 속성
- flex-grow : 빈 공간을 모두 채워서 배치. 기본값 1
- flex-shrink : 넘치는 플렉스 아이템의 크기를 줄여서 배치. 기본값 1
- flex-basis : 플렉스 아이템의 크기를 지정. 기본값 0
사용예시1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex</title>
<style>
.parent {
width: 400px;
display: flex;
border: 1px solid
}
.parent div {
width: 100px;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-transform: uppercase;
}
.shrink div {
width: 200px;
}
.parent .grow{
flex-grow: 0.5; /* 빈 공간(플렉스박스공간 - 플렉스아이템들을합친공간)의 50%를 차지*/
}
.shrink div:last-child{
flex-shrink: 2; /* 1: 1: 2 비율이 됨. 넘치는 200의 값에서 50%인 100px이 줄어서 100px로 나타남*/
}
.parent .basis{
flex-basis: 180px; /* 플렉스아이템의 너비를 180으로 지정. %를 쓰면 부모 요소의 너비 대비 %를 지정한 것.*/
}
.all div:nth-child(1){
flex: 1 1 0; /* flex: 1로 축약해서 사용 가능*/
}
.all div:nth-child(2){
flex: 1 1 0; /* flex: 1로 축약해서 사용 가능*/
}
.all div:nth-child(3){
flex: 2 1 0; /* flex: 2로 축약해서 사용 가능*/
}
</style>
</head>
<body>
<h2>flex-grow</h2>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div class="grow">box3</div>
</div>
<h2>flex-shrink</h2>
<div class="parent shrink">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
<h2>flex-basis</h2>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div class="basis">box3</div>
</div>
<h2>flex</h2>
<div class="parent all">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
사용예시2)
flex를 이용하여 간단한 애니메이션을 설정할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex</title>
<style>
.parent {
width: 400px;
display: flex;
border: 1px solid
}
.parent div {
width: 100px;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-transform: uppercase;
}
.all div{
flex: 1;
transition: 0.5s;
}
.all div:hover{
flex: 2;
}
</style>
</head>
<body>
<h2>flex</h2>
<div class="parent all">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>