width와 flex-basis의 차이
3570
작성한 질문수 7
강의에서 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>가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
120
1
수업자료 다운로드
0
122
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
138
1
css grid repeat() 에서 autofit 사용시
0
183
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
121
1
웹에서 위치?값
0
212
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
510
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
310
1
flex-basis auto, 0 차이
0
711
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
607
1
animation forwards 관련 질문
0
489
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
560
1
flex-grow IE 질문드립니다.
0
625
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
437
1
Grid 수직정렬 문의
0
1076
1
card__item에 display:flex를 했을 때..
0
513
1
11vmin
0
419
1
header class 안에 div와 h2
0
577
1
grid 반응형 페이지 step1 질문있습니다~
0
282
1
반응형 페이지 step4 order
0
357
1
미디어쿼리 사이즈
1
287
1
figure + div
0
301
1
CSS Grid를 통한 정렬의 장점
0
248
1