如何在不断变化的 flex-parent 中保持绝对项目的对齐？

Question

Basically, I have a few banners overtop of some images inside a flex-box.基本上，我在 flex-box 中有一些横幅覆盖了一些图像。 The images are aligned according to the CSS while the flexbox is in its flex-direction: row orientation, then they all bunch at the top and smother each other when the flex box switches to flex-direction: column .当 flexbox 处于其flex-direction: row方向时，图像根据 CSS 对齐，然后当 flex box 切换到flex-direction: column时，它们都聚集在顶部并相互窒息。

<html>
    <div class="locations">
        <div class="location">
            <img src="resources/images/norbert-toth-I1oL89qxefc-unsplash.jpg" />
            <div class="location-container>
                <h2>Herring Bone Library</h2>
                <p>141 Address St. <br>Detroit, MI <br>49449</p>
            </div>
        </div>
        <div class="location ">
            <img src="resources/images/kristen-colada-adams-wpCJlKxCNRA-unsplash.jpg" />
            <div class="location-container">
                <h2>Sunrise Botanical <br>(Downstairs)</h2>
                <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
            </div>
        </div>
        <div class="location">
            <img src="resources/images/daria-volkova-_IhXaHmTJr8-unsplash.jpg" />
            <div class="location-container">
                <h2>Black Cat Coffee</h2>
                <p>686 My Mind <br>Detroit, MI <br> 49448</p>
            </div>
        </div>
    </div>
</html>

Essentially with the added CSS, the banners with the class location-container don't change their orientation with the flex-box, and they display on top of one another only in the first parent.本质上，通过添加 CSS，带有location-container类的横幅不会随着 flex-box 改变它们的方向，并且它们仅在第一个父级中显示在另一个之上。

Here's their CSS:这是他们的 CSS：

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: absolute;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
    }
}

It's expected that once the width of the webpage reaches 1200px, the flex-box will change orientation to direction: column, and the text containers will stay in their relative places.预计一旦网页宽度达到 1200px，flex-box 将改变方向为 direction: column，文本容器将留在它们的相对位置。

Is there any way to keep the banners in their proper locations when the parent containers flex?当父容器弯曲时，有什么方法可以将横幅保持在正确的位置？

Answer 1

In your media 1200px you are still using position:absolute .在您的媒体1200px中，您仍在使用position:absolute 。 You need to set it location-container class to relative once you are in that viewport.进入该视口后，您需要将其location-container类设置为relative 。 Also you need to add min-width to it so that each location-container is equal.您还需要为其添加min-width ，以便每个location-container都相等。

 .locations { display: flex; justify-content: center; align-items: center; margin: 3rem 4rem; gap: 2rem; position: relative; }.location-container { position: absolute; background-color: #fffaf7; margin-left: 1rem; padding: 1rem; top: 1rem; }.location-container h2 { font-family: "Roboto Condensed", sans-serif; margin-bottom: 1rem; }.location-container p { font-family: "Cabin", sans-serif; }.location img { width: 100%; max-height: 46rem; } @media only screen and (max-width: 1200px) {.locations { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 3rem 4rem; gap: 2rem; position: relative; }.location-container { position: relative; background-color: #fffaf7; margin-left: 1rem; padding: 1rem; top: 1rem; min-width:300px; } }

 <div class="locations"> <div class="location"> <div class="location-container"> <h2>Herring Bone Library</h2> <p>141 Address St. <br>Detroit, MI <br>49449</p> </div> </div> <div class="location"> <div class="location-container"> <h2>Sunrise Botanical <br>(Downstairs)</h2> <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p> </div> </div> <div class="location"> <div class="location-container"> <h2>Black Cat Coffee</h2> <p>686 My Mind <br>Detroit, MI <br> 49448</p> </div> </div> </div>

Answer 2

It may not be true for your original code, but the first <div class="location-container> is missing a closing " in the class attribute.对于您的原始代码可能不是这样，但是第一个<div class="location-container>在类属性中缺少一个结束" 。 That will get in the way and need to be corrected (done in the snippet).这会妨碍并需要更正（在代码片段中完成）。

You made the absolute positioned location-container relative to .locations with ending s , but they should be relative to .location without the s .您制作了相对于.locations的absolute定位location-container ，结尾为s ，但它们应该相对于.location没有s 。

So所以

remove position: relative from .locations从.locations中删除position: relative
add .location { position: relative } to your CSS将.location { position: relative }添加到您的 CSS

And you're good to go.你可以开始了。

BTW, I did noting about overflowing .location content, but added some nice random pictures to show the effect.顺便说一句，我确实注意到溢出的.location内容，但添加了一些不错的随机图片来显示效果。

UPDATE after looking deeper into your code I noticed that all but flexbox .locations { flex-direction: column } is different.在深入了解您的代码后进行更新，我注意到除了flexbox .locations .locations { flex-direction: column }之外的所有内容都是不同的。 There is no need to define the other properties a second time.无需再次定义其他属性。

Rule of thumb:经验法则：

define all properties outside a media query that stay the same for each device.在媒体查询之外定义对每个设备保持相同的所有属性。
inside a media query override only the properties that need to be changed and/or add new ones.在媒体查询中，仅覆盖需要更改和/或添加新属性的属性。 In this case, only flex-direction needs to be changed.在这种情况下，只需要更改flex-direction 。

I adjusted the snippet accordingly...我相应地调整了片段......

 .locations { display: flex; justify-content: center; align-items: center; margin: 3rem 4rem; gap: 2rem; /* position: relative; /* REMOVE */ } /* ADD */.location { position: relative; }.location-container { position: absolute; background-color: #fffaf7; margin-left: 1rem; padding: 1rem; top: 1rem; }.location-container h2 { font-family: "Roboto Condensed", sans-serif; margin-bottom: 1rem; }.location-container p { font-family: "Cabin", sans-serif; }.location img { width: 100%; max-height: 46rem; } @media only screen and (max-width: 1200px) {.locations { flex-direction: column; } }

 <div class="locations"> <div class="location"> <img src="https://picsum.photos/1200/700?random=1"> <div class="location-container"> <h2>Herring Bone Library</h2> <p>141 Address St. <br>Detroit, MI <br>49449</p> </div> </div> <div class="location"> <img src="https://picsum.photos/1200/700?random=2"> <div class="location-container"> <h2>Sunrise Botanical <br>(Downstairs)</h2> <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p> </div> </div> <div class="location"> <img src="https://picsum.photos/1200/700?random=3"> <div class="location-container"> <h2>Black Cat Coffee</h2> <p>686 My Mind <br>Detroit, MI <br> 49448</p> </div> </div> </div>

如何在不断变化的 flex-parent 中保持绝对项目的对齐？

问题描述

2 个解决方案

解决方案1
0 2022-12-15 03:37:52

解决方案2
0 2022-12-15 04:01:21

如何在不断变化的 flex-parent 中保持绝对项目的对齐？

问题描述

2 个解决方案

解决方案1 0 2022-12-15 03:37:52

解决方案2 0 2022-12-15 04:01:21

解决方案1
0 2022-12-15 03:37:52

解决方案2
0 2022-12-15 04:01:21