-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
Flex 핵심정리 #5 에서 flex의 결과에 대한 질문입니다.
20.05.22 08:32 작성 조회수 255
0
강의를 다시 복습차원에서 보고있는데, 실습을 하다보니 조금 이해가 안되는 일이 발생해서 질문합니다.
아래와 같이 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>
답변을 작성해보세요.
1
1분코딩
지식공유자2020.05.22
flex-grow의 비율은 말씀대로 padding과 border를 포함하지 않는데,
그래서 box-sizing: border-box;를 제거하셔도 똑같이 보이는걸 확인하실 수 있을 거에요.
그러면 flex를 사용할 때는 border-box가 의미 없느냐, 그건 또 아닌 것이
반응형 페이지 예제에서 말씀드렸듯이 컬럼 레이아웃을 짤 때는 flex-grow보다 width를 사용하는 것이 편리한 점이 많은데요,
width를 사용할 때는 우리 예상대로 border-box가 잘 동작한답니다.
요 차이를 인지하시고, 적절하게 사용해주시면 좋을 것 같습니다^^
0
답변 2