css 반응형 예제 : display: flex 이용하기

 

부모 요소에 적용하고

display: flex

justify-content: center;
align-items: center;

flex-wrap: wrap;

 

자식에게 폭만 잘 지정해주면

이러한 것을 폭을 줄여주면 잘 넘어간다.

반응형 만들기

 

 

 

그러나 테블릿 일 때 2단으로 보여주고

테블릿 반응형

 

모바일 화면일 때 80%찬 화면으로 보여주려면

미디어 쿼리도 잘 써줘야 한다.

 

모바일 반응형

 

 

코딩을 시작하면....

html 부분은 단순함

 

<div class="explain-container">       <div>         <h4>피자</h4>         <p>풍부한 토마토 소스</p>       </div>       <div>         <h4>햄버거</h4>         <p>풍부한 불향</p>       </div>       <div>         <h4>치킨</h4>         <p>깊은 간장맛</p>       </div>       <div>         <h4>콜라</h4>         <p>느끼함을 제거하는 맛</p>       </div> </div>

 

 

css 부분에는 특별하게 미디어쿼리를 사용한다.

 

.explain-container {   font-size: 25px;   text-align: center;   display: flex;   justify-content: center;   align-items: center;   flex-wrap: wrap; } .explain-container > div {   background-color: rgb(185, 185, 185);   width: 300px;   padding: 10px;   margin: 10px;   border-radius: 10px; } @media screen and (max-width: 1200px) {   .explain-container > div {     width: 40%;   } } @media screen and (max-width: 768px) {   .explain-container > div {     width: 80%;   } }

 

 

만약에 폭을 줄이면 그냥 요소가 밀려나가게 하려면

미디어 쿼리는 사용할 필요가 없고 width 만 잘 설정하면 된다.

 

태블릿, 스마트폰을 고려한다면...

미디어 쿼리를 이용하여

태블릿의 폭은 40%, 스마트폰의 폭은 80%로 해준다.