flex - 07

flex로 3단 반응형 카드리스트 만들기

<div class="card-list-con">
    	<ul class="card-list">
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    				<img src="images/ilbuni.png" alt="일분이">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis? dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    				<img src="images/ilbuni.png" alt="일분이">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum.
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    				<img src="images/ilbuni.png" alt="일분이">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim impedit odio expedita pariatur architecto molestias recusandae quam distinctio! Nemo sapiente laborum fugit adipisci reiciendis eos in eveniet dicta iure unde vel beatae nihil sit necessitatibus similique perspiciatis saepe aperiam, expedita laudantium consequatur? Blanditiis, rem exercitationem. Exercitationem odio aliquam distinctio unde?
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
    			</div>
    		</li>
    		<li class="card-item">
    			<figure class="card-image" style="background-image: url(images/ilbuni.png)">
    			</figure>
    			<div class="card-desc">
    				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
    			</div>
    		</li>
    	</ul>
	</div>

.card-item {
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
}
.card-image {
	height: 0;
	padding-bottom: 60%;
	width:100%;
	background-color:  lightblue;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.card-desc {
	padding:1em;
	background-color: #fff;
	flex:1 1 auto;
}
.card-list-con {
	overflow-x:hidden;
	/* contain: paint; */
}

.card-image에 padding-bottom으로 background가 들어가도록 설정해준다.

.card-desc height값이 컨텐츠 내용에 상관없이 균일하게 나오도록
.card-item에 flex 설정을 해주고 flex-direction: column; 설정해준다.

.card-list-con에 가로스크롤이 생기지않도록 overflow-x:hidden; 설정해준다.

@media (min-width:600px){
	.card-list {
		display: flex;
		flex-wrap: wrap;
		margin:0 -1rem;
	}
	.card-item {
		width:50%;
		padding:0 1rem;
	}
}

@media (min-width:1200px){
	.card-item {
		width:33.33333%;
	}
}

min-width:600px 일때 컨텐츠가 두줄로 나오고 min-width:1200px일때 세줄로 나오게 50%, 33.33% 설정해주고 간격을 위해 padding:0 1rem;을 주고 양끝 패딩을 없애기위해 margin:0 -1rem 를 설정해준다.