CSS3 플렉스 요소의 속성 (align-self, flex)
2021. 6. 27. 23:49
728x90
플렉스 요소별로 배치 align-self
- 플렉스 컨테이너의 align-items 속성보다 우선 적용
이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성값을 설정 가능
|
<!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_container{
width: 500px;
height: 200px;
border: 5px solid red;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.flex_container1{
width: 500px;
height: 200px;
border: 5px solid blue;
display: flex;
flex-direction: column;
}
.box{
padding: 5px 45px;
margin: 5px;
background-color: black;
color: white;
}
.align1{
align-self: flex-start;
}
.align2{
align-self: flex-end;
}
.align3{
align-self: center;
}
.align4{
align-self: stretch;
}
</style>
</head>
<body>
<h1>flex-direction: row;</h1>
<div class="flex_container">
<div class="box align1">1</div>
<div class="box align2">2</div>
<div class="box align3">3</div>
<div class="box align4">4</div>
</div>
<h1>flex-direction: column;</h1>
<div class="flex_container1">
<div class="box align1">1</div>
<div class="box align2">2</div>
<div class="box align3">3</div>
<div class="box align4">4</div>
</div>
</body>
</html>
|
cs |
플렉스 요소의 너비를 상대적으로 설정 flex
- 같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정
|
<!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;
}
.container{
width: 90%;
display: flex;
border: 5px solid black;
}
.box{
text-align: center;
font-size: 16px;
font-weight: bold;
height: 60px;
color: black;
}
.flow0{
flex: 0;
background-color: red;
}
.flow1{
flex: 1;
background-color: yellow;
}
.flow2{
flex: 2;
background-color: greenyellow;
}
.flow3{
flex: 3;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box flow0">0</div>
<div class="box flow0">0</div>
<div class="box flow1">1</div>
<div class="box flow2">2</div>
<div class="box flow3">3</div>
</div>
</body>
</html>
|
cs |
728x90
'CSS > Study' 카테고리의 다른 글
