-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
flex-shrink가 정확히 어떤 기준으로 값이 줄어드는 건가요?
20.05.23 23:14 작성 조회수 111
0
이번에 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>
답변을 작성해보세요.
1
1분코딩
지식공유자2020.05.25
아, 말 그대로 "비율"이기 때문입니다.
두 요소의 원래 크기가 대략 20배 정도인데요,
줄어든 크기도 똑같이 그 비율이 적용되었다고 생각하시면 됩니다.
1003.22 / 50
276.25 / 13.77
두 값 모두 대략 20.06 정도가 나오네요~
0
답변 2