Question

我正在使用Flexbox创建目标网页，但在浏览浏览器窗口大小时，其中一个元素出现问题：

这里通常是：

减小屏幕尺寸时：

您可以看到图像现在溢出，即使父图像是弹性框。每个图像都由一个带有flex的div包裹：1; 这是HTML：

<div class="main-content">
    <div class="tab content-header">This is the Header</div>
    <div class="tab content-occasions">
            <div class="occasion party">
                <img src="assets/party.png">
                <div class="occasion-word">Party</div>
            </div>
            <div class="occasion wedding">
                <img src="assets/Wedding.png">
                <div class="occasion-word">Wedding</div>
            </div>
            <div class="occasion birthday">
                <img src="assets/birthday.png">
                <div class="occasion-word">Birthday</div>
            </div>
            <div class="occasion more">
                <img src="assets/more.png">
                <div class="occasion-word">More</div>
            </div>
    </div>
    <div class="tab content-action">
        <div class="buttons">
            <div class="button button-how">Shop</div>
            <div class="button button-shop-filters">How?</div>
        </div>
    </div>
</div>

这是CSS：

.main-content {
    display: flex; 
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content:space-around;
}

.main-content > .tab {
    flex:1;
    margin-right: 10%;
}

.content-occasions {
    flex: 2 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 24px !important;
    justify-content: space-around;
    align-items: center;
}
.content-action {
    flex: 0.8 !important;
}
.content-header {
    flex: 0.8 !important;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif !important;
    font-size: 36px !important;
    line-height: 55px !important;
    color: white;
    display: flex;
    align-items: flex-end;

}

.occasion {
    text-align: center;
    flex: 1;
}
.occasion img {
    max-height:100%;
    max-width: 80%;
    height: auto;
    min-width: 140px;
}

我尝试了很多不同的方法。如果content-occasion没有设置display：flex，那么它会拉伸以适应内容，然后标题和按钮不在视图范围内。请帮忙！我需要确保图像不会溢出，而是占用剩余的空间。我是Flexbox的初学者！谢谢！

减小窗口大小时，Flex Wrap会导致项目溢出

0 个答案: