flex - 04

flex를이용해 메세지 리스트 만들어보기

<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 consectetur adipisicing elit. Iure nobis, nisi numquam harum voluptates vel corrupti dolorem id, dicta eveniet similique architecto et, exercitationem quaerat alias ratione. Dicta, beatae, aspernatur, sit commodi quis illo non aut repellendus veritatis at ab.
			</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. Iure nobis, nisi numquam harum voluptates vel corrupti dolorem id, dicta eveniet similique architecto et, exercitationem quaerat alias ratione.
			</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. Iure nobis, nisi numquam harum voluptates vel corrupti dolorem id.
			</p>
		</li>
	</ul>

.user-item {
	display: flex;
	margin-bottom: 1.5em;
	align-items: center;
}
.user-photo {
	flex-shrink: 0;
	width:50px;
	height:50px;
	margin-right: .5em;
	border:2px solid #333;
	border-radius: 50%;
	background-color: gold;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 150%;
}

리스트에 display: flex; 선언해준뒤
.user-photo 의 이미지가 찌그러지지 않도록
flex-shrink: 0; 으로 설정해주면
형태가 유지되어 자연스럽게 나오게된다.