하기와 같이 코딩시
마지막 모바일 버전은 그냥 flex가로정렬을 적용 안해서 만드는 편법도 사용해도되는지하고
테블릿사이즈는 왜 width50%가 아닌 40%를 적용해야 두줄로 적용되는지 궁금해서 잠이 오질않습니다
저처럼 flex 요소 사용시
display:flex;
flex-direction:row;
flex-wrap:wrap;
위 요소를 사용해도 괜찮은건가요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="main.css" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-container">
<div class="main-menu">
<h3>Fast Shopping</h3>
<a>lorem ipsum</a>
</div>
<div class="main-menu">
<h3>Good Service</h3>
<a>lorem ipsum</a>
</div>
<div class="main-menu">
<h3>Free Coupons</h3>
<a>lorem ipsum</a>
</div>
<div class="main-menu">
<h3>New Products</h3>
<a>lorem ipsum</a>
</div>
</div>
</body>
</html>
---------
body{
margin:0;
}
.main-container{
display:flex;
width:80%;
max-width: 1200px;
height:400px;
background-color: beige;
justify-content:center;
align-items: center;
margin:auto;
}
.main-menu{
text-align: center;
margin:80px;
}
@media screen and (max-width : 992px) {
.main-container{
display:flex;
flex-direction:row;
flex-wrap:wrap;
width:80%;
max-width: 992px;
height:500px;
background-color: beige;
justify-content:center;
align-items: center;
margin:auto;
}
.main-menu{
width:40%;
margin:10px;
text-align: center;
}
}
@media screen and (max-width : 576px) {
.main-container{
display:flex;
flex-direction: column;
width:80%;
max-width: 992px;
height:500px;
background-color: beige;
justify-content:center;
align-items: center;
margin:auto;
}
.main-menu{
margin:10px;
text-align: center;
}
}
