Flexbox：应用媒体查询后删除空格
Posted
技术标签:
【中文标题】Flexbox：应用媒体查询后删除空格【英文标题】：Flexbox: Removing blank space after applying media query 【发布时间】：2022-01-18 05:03:51 【问题描述】：您知道为什么当我缩小浏览器并且将 flex 方向更改为列时，我的图像和文本不再位于中间并且看起来是左对齐的吗？右侧有一个巨大的空间，无论浏览器的大小如何，我都希望内容始终位于中心。我使用了左对齐和居中等明显的技巧，但空间仍然存在。
代码如下：
html：
<body>
<div class="container">
<div class="products">
<div class="product product-1">
<img src="images/product-1.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-2.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-3.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
</div>
</div>
</body>
CSS：
.container
width: 95%;
max-width: 1280px;
margin: 0 auto;
img
max-width: 100%;
width: 400px;
.products
display: flex;
justify-content: space-evenly;
.product-1
width: 33%;
margin: 0 0.50em;
@media (max-width: 600px)
.products
flex-direction: column;
.product-1
width: 100%;
p
width: 75%;
【问题讨论】：
【参考方案1】：您应该在 product-1 中使用 flexbox 来居中项目
.product-1
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
.container
width: 95%;
max-width: 1280px;
margin: 0 auto;
img
max-width: 100%;
width: 400px;
.products
display: flex;
justify-content: space-evenly;
.product-1
width: 33%;
margin: 0 0.50em;
@media (max-width: 600px)
.products
flex-direction: column;
.product-1
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
p
width: 75%;
<body>
<div class="container">
<div class="products">
<div class="product product-1">
<img src="images/product-1.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-2.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-3.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
</div>
</div>
</body>【讨论】：
天哪！谢谢！！这么简单（捂脸哈哈）以上是关于Flexbox：应用媒体查询后删除空格的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法使用 Flexbox 在媒体查询中将我的社交媒体图标居中？