얼마전 강의를 듣다가 flex-basis라는 것을 알게 되었다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="flex-basis.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
</html>
body {
background: #20262e;
}
.container {
display: flex;
}
.item {
padding: 10px;
color: white;
}
.item:nth-child(1) {
background: red;
flex-basis: 100px;
}
.item:nth-child(2) {
background: green;
width: 100px;
}
.item:nth-child(3) {
background: blue;
}
위와 같이 구성했을 땐 차이가 없다
여기에서 몇 가지 변화를 줘보자
body {
background: #20262e;
}
.container {
display: flex;
flex-direction: column;
}
.item {
padding: 10px;
color: white;
}
.item:nth-child(1) {
background: red;
flex-basis: 100px;
}
.item:nth-child(2) {
background: green;
width: 100px;
}
.item:nth-child(3) {
background: blue;
}
flex-direction을 column으로 지정하면 위와 같이 지정되는 영역이 달라진다
만약 이 상태에서 2번째 item을 width 대신 min-width로 변경하면 아래와 같다
body {
background: #20262e;
}
.container {
display: flex;
flex-direction: column;
}
.item {
padding: 10px;
color: white;
}
.item:nth-child(1) {
background: red;
flex-basis: 100px 0px;
}
.item:nth-child(2) {
background: green;
min-width: 100px;
}
.item:nth-child(3) {
background: blue;
}
flex-basis는 띄어쓰기를 기준으로 가로 세로를 지정할 수 있다는 것을 알 수 있다
다시 flex-direction을 row로 변경하고 길이를 줄여보자
body {
background: #20262e;
}
.container {
display: flex;
/* flex-direction: column; */
}
.item {
padding: 10px;
color: white;
}
.item:nth-child(1) {
background: red;
flex-basis: 100px;
}
.item:nth-child(2) {
background: green;
min-width: 100px;
}
.item:nth-child(3) {
background: blue;
}