Flex 핵심정리 #5 에서 flex의 결과에 대한 질문입니다.
강의를 다시 복습차원에서 보고있는데, 실습을 하다보니 조금 이해가 안되는 일이 발생해서 질문합니다.
아래와 같이 html을 작성하고 브라우저로 열어보면 예상한대로 1:3:1 로 나뉜 화면이 나왔습니다. 그런데 개발자 도구를 열어서 flex-item의 실제 길이 값들을 보니 ...
첫번째 flex-item 가로 너비 : 394.41
두번째 flex-item 가로 너비 : 1131.2
세번째 flex-item 가로 너비 : 394.41
라는 값이 나왔습니다.
394.41 x 3 = 1183.23 이라는 값이 나옵니다.
여기서부터 이상하다는 걸 느꼈습니다.
나중에 더 자세히 flex-item의 border와 padding 값을 제외한 크기만을 갖고 봤더니,
그건 1:3:1 비율을 맞추는 것을 확인했습니다.
왜 이러는 건가요????
default.css에서 box-sizing : border-box 을 했음에도
padding과 border를 제외한 내용물만으로 비율을 짜는
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Flex</title>
<link rel="stylesheet" href="default.css">
<style>
.flex-container {
display: flex;
}
.flex-item:nth-child(1) {
flex: 1 1 0%;
}
.flex-item:nth-child(2) {
flex: 3 1 0%;
}
.flex-item:nth-child(3) {
flex: 1 1 0%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">AAAAAAAAAA</div>
<div class="flex-item">BB</div>
<div class="flex-item">CCCCCCC</div>
</div>
</body>
</html>답변 2
1
flex-grow의 비율은 말씀대로 padding과 border를 포함하지 않는데,
그래서 box-sizing: border-box;를 제거하셔도 똑같이 보이는걸 확인하실 수 있을 거에요.
그러면 flex를 사용할 때는 border-box가 의미 없느냐, 그건 또 아닌 것이
반응형 페이지 예제에서 말씀드렸듯이 컬럼 레이아웃을 짤 때는 flex-grow보다 width를 사용하는 것이 편리한 점이 많은데요,
width를 사용할 때는 우리 예상대로 border-box가 잘 동작한답니다.
요 차이를 인지하시고, 적절하게 사용해주시면 좋을 것 같습니다^^
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
119
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
418
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