Как использовать, чтобы избежать усадки на изгиб, переполнение по горизонтали - PullRequest
Новая
       40

Как использовать, чтобы избежать усадки на изгиб, переполнение по горизонтали

0 голосов
/ 21 апреля 2020

Я пытаюсь создать древовидную структуру, используя 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, если это необходимо. Но, не должны уменьшаться пункт .

Спасибо !!!

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

Если вы хотите добиться этого, превратив элемент root в блок, поместите переполнение : auto в . root class и в .item class добавить f lex-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>
1 голос
/ 21 апреля 2020

Создайте элемент root 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>
...