如何通过水平溢出来避免 flex 收缩

Question

我正在尝试使用 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.

谢谢！！！

Answer 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>

Answer 2

如果您想通过将根元素作为块来实现此目的，请将 overflow:auto 放入 .root class并在 .item class 添加 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 收缩

How to use avoid shrink on flex by overflowing horiontally

html

css

overflow

flexbox