Flexbox：应用媒体查询后删除空白 space

Question

您知道为什么当我缩小浏览器的大小并将弹性方向更改为列时，我的图像和文本不再位于中间并且看起来左对齐吗？右侧有一个巨大的 space，无论浏览器大小如何，我都希望内容始终位于中央。我使用了明显的技巧，如左对齐和居中等，但 space 仍然存在。

代码如下：

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%;
    }
}

Answer 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：应用媒体查询后删除空白 space

Flexbox: Removing blank space after applying media query

css

flexbox

media-queries

margin

spacing