1. 나머지 가로 길이 유동적으로 적용
container 영역(부모 요소)에 display : flex;
item(자식 요소)에 flex : 1, flex : 2, flex : 3... 과 같이 적용
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display : flex;
width : 100%;
height : 50px;
border : 1px solid #000;
}
.item{
width : 100px;
background-color : skyblue;
display : flex;
align-items : center;
justify-content : center;
}
.other{
flex : 1;
display : flex;
justify-content : center;
align-items :center;
border-right : 1px dashed red;
background-color : hotpink;
}
</style>
</head>
<body>
<div class="container">
<div class="item">아이템</div>
<div class="other">컨텐츠1</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display : flex;
width : 100%;
height : 50px;
border : 1px solid #000;
}
.item{
width : 100px;
background-color : skyblue;
display : flex;
align-items : center;
justify-content : center;
}
.other{
flex : 1;
display : flex;
justify-content : center;
align-items :center;
border-right : 1px dashed red;
background-color : hotpink;
}
</style>
</head>
<body>
<div class="container">
<div class="item">아이템</div>
<div class="other">컨텐츠1</div>
<div class="other">컨텐츠2</div>
<div class="other">컨텐츠3</div>
</div>
브라우저 가로길이가 변할때, width가 고정된 요소(.item class 선택자)를 제외하고 나머지 길이를 flex 비율의 따라 나누어 갖는다. 즉 2: 1: 1의 비율로 길이가 설정된다.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display : flex;
width : 100%;
height : 50px;
border : 1px solid #000;
}
.item{
width : 100px;
background-color : skyblue;
display : flex;
align-items : center;
justify-content : center;
}
.other{
flex : 1;
display : flex;
justify-content : center;
align-items :center;
border-right : 1px dashed red;
background-color : hotpink;
}
.first{
flex : 2;
display : flex;
justify-content : center;
align-items :center;
border-right : 1px dashed red;
background-color : yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item">아이템</div>
<div class="first">컨텐츠1</div>
<div class="other">컨텐츠2</div>
<div class="other">컨텐츠3</div>
</div>
</body>
</html>
2. Flex Box 내부에 요소 배열
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display : flex;
}
.aside{
width : 100px;
background-color : yellow;
display : flex;
align-items : center; // 가로축 중앙 정렬
justify-content : center; // 세로축 중앙 정렬
}
.contents{
flex : 1;
}
.item{
background-color : #a3cca3;
border-bottom : 1px solid red;
text-align : center; // 가로축 중앙 정렬
height : 60px;
line-height : 60px; // 세로축 중앙 정렬
}
</style>
</head>
<body>
<div class="container">
<div class="aside">사이드 영역</div>
<div class="contents">
<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<div class="item">아이템 3</div>
<div class="item">아이템 4</div>
<div class="item">아이템 5</div>
<div class="item">아이템 6</div>
</div>
</div>
</body>
</html>
프론트엔드 개발자