J'essaye de créer une structure arborescente en utilisant flex. Lorsque j'utilisais flex avec justify-content: space-around;, je suis confronté à une erreur.

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

Le problème principal est que la largeur de item devrait être la même, mais flex essaie de space-around mais en compromettant la largeur. Ce que je veux, c'est qu'il devrait space-around avec overflow-x si nécessaire. Mais, ne devrait pas réduire l ' article .

Merci!!!

0
Biplove Lamichhane 21 avril 2020 à 11:00

2 réponses

Meilleure réponse

Créez l'élément racine inline-flex au lieu de 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>
1
Temani Afif 21 avril 2020 à 08:05

Si vous voulez y parvenir en faisant de votre élément racine un bloc, mettez overflow: auto dans la classe .root et dans la classe .item ajoutez f < strong> 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
user10014185user10014185 21 avril 2020 à 08:22