【发布时间】：2021-12-01 11:13:34
【问题描述】：
我正在尝试使用媒体查询在 600 像素后仅显示两个巧克力盒，同时保持响应。我正在构建移动优先。出于某种原因，即使我指定了弹性基础，它也会继续填充空间。我不确定我是否正确执行此操作并正在寻求指导。
我正在尝试使用媒体查询在 600 像素后仅显示两个巧克力盒，同时保持响应。我正在构建移动优先。出于某种原因，即使我指定了弹性基础，它也会继续填充空间。我不确定我是否正确执行此操作并正在寻求指导。
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900">
</head>
<div class="flex-container">
<div class="choco-box">
<h3 class="sub-head">Shop Ingredients You Need</h3>
<h1 class="heading">Milk Chocolate </br>Hazelnut Bar</h1>
<img src="https://www.godiva.com/dw/image/v2/AAKG_PRD/on/demandware.static/-/Sites-godiva-master-catalog-us/default/dw22fa285f/product_images/913246-1.jpg" loading="lazy" alt="Milk Chocolate Hazelnut Bar">
<button value="button">Shop Now</button>
</div>
<div class="choco-box">
<h3 class="sub-head">Shop Ingredients You Need</h3>
<h1 class="heading">Milk Chocolate </br>Hazelnut Bar</h1>
<img src="https://www.godiva.com/dw/image/v2/AAKG_PRD/on/demandware.static/-/Sites-godiva-master-catalog-us/default/dw22fa285f/product_images/913246-1.jpg" loading="lazy" alt="Milk Chocolate Hazelnut Bar">
<button value="button">Shop Now</button>
</div>
<div class="choco-box">
<h3 class="sub-head">Shop Ingredients You Need</h3>
<h1 class="heading">Milk Chocolate </br>Hazelnut Bar</h1>
<img src="https://www.godiva.com/dw/image/v2/AAKG_PRD/on/demandware.static/-/Sites-godiva-master-catalog-us/default/dw22fa285f/product_images/913246-1.jpg" loading="lazy" alt="Milk Chocolate Hazelnut Bar">
<button value="button">Shop Now</button>
</div>
<div class="choco-box">
<h3 class="sub-head">Shop Ingredients You Need</h3>
<h1 class="heading">Milk Chocolate </br>Hazelnut Bar</h1>
<img src="https://www.godiva.com/dw/image/v2/AAKG_PRD/on/demandware.static/-/Sites-godiva-master-catalog-us/default/dw22fa285f/product_images/913246-1.jpg" loading="lazy" alt="Milk Chocolate Hazelnut Bar">
<button value="button">Shop Now</button>
</div>
<div class="choco-box">
<h3 class="sub-head">Shop Ingredients You Need</h3>
<h1 class="heading">Milk Chocolate </br>Hazelnut Bar</h1>
<img src="https://www.godiva.com/dw/image/v2/AAKG_PRD/on/demandware.static/-/Sites-godiva-master-catalog-us/default/dw22fa285f/product_images/913246-1.jpg" loading="lazy" alt="Milk Chocolate Hazelnut Bar">
<button value="button">Shop Now</button>
</div>
<div class="choco-box">
<h3 class="sub-head">Shop Ingredients You Need</h3>
<h1 class="heading">Milk Chocolate </br>Hazelnut Bar</h1>
<img src="https://www.godiva.com/dw/image/v2/AAKG_PRD/on/demandware.static/-/Sites-godiva-master-catalog-us/default/dw22fa285f/product_images/913246-1.jpg" loading="lazy" alt="Milk Chocolate Hazelnut Bar">
<button value="button">Shop Now</button>
</div
</div>
.flex-container {
display: flex;
justify-content: space-evenly;
flex-flow: row wrap;I
padding: 0;
margin: 0;
row-gap: 30px;
}
.choco-box {
margin: auto;
width: 350px;
border: 2px solid #cfb56a;
padding: 30px;
text-align: center;
}
h1, h3, button {
font-family: Montserrat;
text-transform: uppercase;
margin: 0;
}
.sub-head {
color: #707070;
font-size: .9rem;
font-weight: 600;
}
.heading {
text-align: center;
font-size: 1.5rem;
text-transform: none;
font-weight: 800;
}
img {
display: block;
margin: 0 auto 10px;
width: 100%;
max-width: 300px;
}
button {
margin: auto;
padding: 15px 58px;
min-width: 150px;
text-align: center;
background-color: black;
color: white;
font-weight: 600;
cursor: pointer;
}
@media screen and (min-width: 600px) {
}
非常感谢任何帮助。
【问题讨论】：
标签： html css mobile flexbox responsive