CSS의 flex-basis 속성으로 고정하고 싶은 div에 flex-basis: 200px; 지정해봤습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#E7E9EB;
}
#myDIV {
height:300px;
background-color:#FFFFFF;
}
#mymain {
height: 100px;
display: flex;
}
#mymain div {
padding:10px;
width: 25%;
}
#bluediv {
flex-basis: 200px;
}
</style>
</head>
<body>
<h1>flex-basis property</h1>
<div id="myDIV">
<p>nav width 고정해보기</p>
<div id="mymain">
<div id="bluediv" style="background-color:lightblue;">nav 고정</div>
<div style="background-color:coral;">cont1</div>
<div style="background-color:khaki;">cont2</div>
<div style="background-color:pink;">cont3</div>
</div>
</div>
</body>
</html>
반응형