-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
width와 flex-basis의 차이
20.03.30 17:01 작성 조회수 2.61k
0
강의에서 width와 flex-basis의 차이가 width: 50%로 주고, flex-basis: auto로 주었을때 flex-basis의 값에 width의 값 50%가 들어오기 때문에 차이가 있다 라고 말씀 해 주셨는데, 반대로 flex-basis: 50%로 주고 width: auto 로 동일한 결과값을 가지게 되니 차이점이 없다고 생각됩니다 ㅜ 말씀해 주신대로 width를 50%로 주고 flex-basis를 auto로 주어야 하는 이유도 이해가 안됩니다.. flex: 0 50%;로 주면 안되는 건가요?
답변을 작성해보세요.
2
1분코딩
지식공유자2020.03.30
말씀대로 기본적인 결과는 같습니다. 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
답변 2