flex-shrink가 정확히 어떤 기준으로 값이 줄어드는 건가요?
이번에 FLEX_UI# - 4.메세지 리스트 강좌를 들으면서 이것저것 실험하다가 이상하다고 느낀게 있어서 질문 올립니다.
저는 flex-shrink가 줄어드는 비율이며
그 값이 현재 <p class="message-content"> 와 <figure class="user-photo"> 가 같기 때문에
당연히 <p class="message-content"> 이 줄어드는 길이와 <figure class="user-photo">가 줄어드는 길이가 같은 줄 알았습니다. 그런데 오늘 메세지 리스트 강좌를 들으면서 아래 html을 테스트해봤는데, 전혀 그렇지 않았습니다.
아래 html을 통해서 브라우저(FireFox)를 열고, 개발자 도구를 열어 테스트를 해봤습니다.
브라우저 화면을 천천히 줄이면서 개발자 도구를 통해 3번째 행의 flex-item들이 flex-shrink에 의해서 얼마만큼의 길이로 줄어드는지 관찰했습니다.
figure.user-photo :
기본 크기 (width: 50px) 50px
유연성 (flex-shrink: 1) -13.77px
p.message-content :
콘텐츠 크기 : 1003.22px
유연성 (flex-shrink: 1) -276.25px
만약 저의 생각(=착각)대로라면, 둘 다 똑같이 -13.77 px로 줄어들거나, 아니면 둘 다 똑같이 -267.25px 로 줄어들어야 했으니 말입니다.
제가 착각했다는 건 이제 알았지만, 위같은 값(-13.77px , -276.25px) 이 나오는 이유는 아직도 의문입니다.
왜 이런건지 알려주실 수 있을까요?
<!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>
/* message */
.user-item {
display: flex;
}
.user-photo {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 50%;
background-color: gold;
background-repeat: no-repeat;
background-position: center;
background-size: 150%; /* 수정 */
}
</style>
</head>
<body>
<ul class="user-list message-list">
<li class="user-item message-item">
<figure class="user-photo" style="background-image: url(images/ilbuni.png);"></figure>
<p class="message-content">
Lorem ipsum dolor sit amet con
</p>
</li>
<li class="user-item message-item">
<figure class="user-photo" style="background-image: url(images/ilbuni.png);"></figure>
<p class="message-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus debitis maiores nisi. Reiciendis, minus. Cumque, voluptate! Corporis natus inventore error voluptas blanditiis? Cum debitis voluptas rem fuga porro, nulla quae at voluptatem laudantium consequuntur autem maxime quis obcaecati? Nulla, in.
</p>
</li>
<li class="user-item message-item">
<figure class="user-photo" style="background-image: url(images/ilbuni.png);"></figure>
<p class="message-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus debitis maiores nisi. Reiciendis, minus. Cumque, voluptate! Corpe
</p>
</li>
</ul>
</body>
</html>답변 2
1
아, 말 그대로 "비율"이기 때문입니다.
두 요소의 원래 크기가 대략 20배 정도인데요,
줄어든 크기도 똑같이 그 비율이 적용되었다고 생각하시면 됩니다.
1003.22 / 50
276.25 / 13.77
두 값 모두 대략 20.06 정도가 나오네요~
가로스크롤 과 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