반응형을 만지고 있는데,
저는 숙제를 display:flex; 를이용하여 예제를 풀려고 했습니다.
<div class="big">
<div class="menu">
<h4>Fast Shopping</h4>
<p>lorem ipsum</p>
</div>
<div class="menu">
<h4>Good Service</h4>
<p>lorem ipsum</p>
</div> <div class="menu">
<h4>Free Coupons</h4>
<p>lorem ipsum</p>
</div>
<div class="menu">
<h4>New Products</h4>
<p>lorem ipsum</p>
</div>
</div>
.big {
width: 100%;
display: flex;
max-width: 600px;
text-align: center;
margin:auto;
margin-top: 50px;
margin-bottom: 50px;
}
.menu {
width: 25%;
}
@media screen and (max-width: 1200px) {
.menu {
width: 50%; }
}
@media screen and (max-width: 768px) {
.big {display: block;}
}
1200 스크린에서 width:50%를 넣어도 display:flex 때문인지 menu클래스의 폭이 줄어들 질 않습니다. 두줄로 나눠지지도 않구요.
그렇다고 display:block으로 하면 세로 배열이 되고 display:block 후에 다시 float을 넣어서 하자니 자존심이 허락을 안하고, 첫번째 메뉴와 두번째 매뉴를 div 로 묶은 후에 다시 display: block 과 flex를 이용해서 만드는 방법밖엔 없을까요?
float으로는 구현이 잘되었습니다.
flex로 구현하는 방법을 떠올려보고 싶은데 초보라 그런지 어떤식으로 사고를 해야 할 지 감이 잘 안 옵니다.
힌트나 접근법에 대해서 살짝 언지만이라도 부탁드립니다.
