如何使用通过水平溢出来避免在 flex 上收缩答案

【问题标题】：How to use avoid shrink on flex by overflowing horiontally如何使用通过水平溢出来避免在 flex 上收缩
【发布时间】：2020-08-03 21:49:50
【问题描述】：

我正在尝试使用 flex 制作树状结构。当我将 flex 与 justify-content: space-around; 一起使用时，我遇到了一个错误。

.root {
    margin-top: 40px;
    white-space: nowrap;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}
.branch {
    display: flex;
    justify-content: space-around;
}
.item {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: red;
    margin: 10px;
}

<div class="root">
    <div class="branch">
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

主要问题是 item 的宽度应该相同，但 flex 试图 space-around 但通过妥协宽度。我想要的是它应该space-around 和overflow-x 如果需要。但是，不应该缩小item。

谢谢！！！

【问题讨论】：

标签： html css flexbox overflow

【解决方案1】：

制作根元素inline-flex 而不是flex

.root {
    margin-top: 40px;
    min-width: 100%;
    display: inline-flex;
    flex-direction: column;
}
.branch {
    display: flex;
    justify-content: space-around;
}
.item {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: red;
    margin: 10px;
}

<div class="root">
    <div class="branch">
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

【讨论】：

哇！！！！谁已经知道这太容易了！！！谢谢...它成功了！但是，我们非常感谢您提供少量参考和解释。
当使用 flex 时，你的元素会受到父元素宽度的限制（就像任何块元素一样），但是内联元素会匹配它的内容宽度并且父元素的宽度限制不再适用
但是父母的宽度是min-width ...那么，flex应该允许吧？？？
@BiploveLamichhane 您将 min-width 应用于根元素，这在处理 display:flex 时是无用的，因为该元素默认为 alreadt width:100%。 min-width 不会添加任何内容。使用 inline-flex 将使其缩小以适应，这里的 min-width 将帮助您至少拥有父级的宽度，如果需要更多。就像block和inline-block的区别

【解决方案2】：

如果您想通过将根元素设置为块来实现此目的，请将 overflow:auto 放入 .root 类 和 .item 类添加 flex-shrink:0。

.root {
    margin-top: 40px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    overflow:auto;
}
.branch {
    display: flex;
    justify-content: space-around;
}
.item {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: red;
    margin: 10px;
    flex-shrink:0;
}

<div class="root">
    <div class="branch">
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="branch">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

【讨论】：

是的...这种方式也有效！我在分支上添加flex-shrink ！！！谢谢！！！