코드
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: flex;
justify-content: center;
}
.flex-container {
width: 80%;
height: 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
height: 50px;
}
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
</style>
</head>
<body>
<div class="main">
<div class="flex-container">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
</div>
</body>
</html>1. flex는 인라인 블락
- display: flex; 라고 적는 순간 자식들이 전부 인라인 블락으로 바뀐다.
2. flex 가운데 배치
display: flex;
justify-content: center;3. flex-direction
4. justify-content
- justify-content는 중심축 정렬. main 액시아스(축) → column으로 하면 세로축을 중심으로 end값을 잡고, → row로 하면 가로축을 중심으로 end를 잡는다.
5. flex 화면 비율 1 : 1 : 1
Share article