• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

width와 flex-basis의 차이

20.03.30 17:01 작성 조회수 2.48k

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

·

답변을 작성해보세요.

2

말씀대로 기본적인 결과는 같습니다. 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

유림님의 프로필

유림

질문자

2020.03.31

친절한 답변 감사합니다! 충분히 이해했습니다!