인프런 커뮤니티 질문&답변
작성한 질문수
width와 flex-basis의 차이
작성
·
3.4K
답변 2
2
1분코딩
지식공유자
말씀대로 기본적인 결과는 같습니다. width와 flex-basis 자체가 동작에 살짝 차이가 있는데요, width는 영역을 정확히 강제하지만, flex-basis는 그렇지 않습니다. 플렉스 아이템 안에 플렉스 아이템이 점유하는 너비보다 큰 너비의 자식 요소가 들어갈 경우를 예로 들 수 있는데요, 아래의 코드를 테스트 해보세요. 이런 이유 등으로 flex-basis는 width를 따라가도록 두고, width를 조정하는 방식을 선호하는 경우가 많습니다.
flex: 0 50%로 주면 안되냐고 하셨는데, 당연히 안되는건 없습니다^^ 다만 사람들이 더 선호하는 스타일이 있는 거죠~
Flex 자체가 복합적인 값들이 상호작용 하기때문에, 일반적으로 flex-basis는 auto로 두고, width를 조정하는 편이 예상을 벗어나지 않고 안전하다고 알려져 있습니다. 이 이야기는 이후에 반응형 컬럼 레이아웃 페이지를 만드는 파트에서도 나오니 거기서도 한번 살펴 보세요~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 33.33333%;
/* flex: 0 33.33333%; */
box-sizing: border-box;
padding: 5px;
color: white;
background: mediumseagreen;
}
.box {
width: 50vw;
background: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Lorem, ipsum.</div>
<div class="flex-item">
<div class="box">BOX</div>
</div>
<div class="flex-item">Lorem, ipsum dolor.</div>
<div class="flex-item">Lorem, ipsum.</div>
<div class="flex-item">B</div>
<div class="flex-item">Lorem, ipsum dolor.</div>
</div>
</body>
</html>0
