Flexbox：应用媒体查询后删除空格答案

【问题标题】：Flexbox: Removing blank space after applying media queryFlexbox：应用媒体查询后删除空格
【发布时间】：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%;
    }
}

【问题讨论】：

标签： css flexbox media-queries margin spacing

【解决方案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>

【讨论】：

天哪！谢谢！！这么简单（捂脸哈哈）