Mittlere Flexbox zentrieren und den Rest rechtfertigen

Question

Für eine ungerade Anzahl von Flex-Elementen möchte ich, dass die mittlere in perfekter Mitte ist und andere Elemente einfach um sie herum fließen. Der mittlere Gegenstand hat eine feste Breite, der Rest ist fließend und muss am mittleren Gegenstand haften, damit die Polster fixiert sind.

/* CSS */ 
 

 
.flex-holder { 
 
\t display: flex; 
 
\t justify-content: center; 
 
} 
 
.middle-item { 
 
\t width: 75px; 
 
}

<!-- HTML --> 
 

 
<ul class="flex-holder"> 
 
    <li>Item 1</li> 
 
    <li>Some item</li> 
 
    <li class="middle-item">Middle</li> 
 
    <li>Very long text item</li> 
 
    <li>Test</li> 
 
</ul>

Ist es mit Flexbox tatsächlich möglich? Wenn nein, schlagen Sie bitte eine andere Lösung vor.

Answer 1

Eine Lösung wäre, position: absolute auf Mittelelement zu verwenden und es mit transform: translate() zu zentrieren, aber es wird Überlauf von Elementen auf kleiner Fenstergröße geben, die Sie mit Medienabfragen beheben können.

.flex-holder { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    position: relative; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.middle-item { 
 
    width: 75px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<ul class="flex-holder"> 
 
    <li>Item 1</li> 
 
    <li>Some item</li> 
 
    <li class="middle-item">Middle</li> 
 
    <li>Very long text item</li> 
 
    <li>Test</li> 
 
</ul>

Eine andere Lösung, die gewünschte Ergebnis führt schließen li ‚s links und rechts von Mitte li in ul‘ s zu wickeln und setzen flex: 1 auf sie, so dass sie gleich groß nehmen und setze das mittlere div immer in der Mitte.

ul, .wrap { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    position: relative; 
 
    list-style: none; 
 
    flex: 1; 
 
    padding: 0; 
 
} 
 
.middle-item { 
 
    width: 75px; 
 
    background: lightblue; 
 
    text-align: center; 
 
}

<ul class="flex-holder"> 
 
    <li class="wrap"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Some item</li> 
 
    </ul> 
 
    </li> 
 
    <li class="middle-item">Middle</li> 
 
    <li class="wrap"> 
 
    <ul> 
 
     <li>Very long text item</li> 
 
     <li>Test</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

Die einfachste Art und Weise, wenn die middle-item in der Mitte (gleiche Anzahl von Elementen in rigth und links):

.flex-holder { 
 
    display: flex; 
 
    justify-content: center; 
 
    list-style: none; 
 
    padding:0; 
 
} 
 
.flex-holder li { 
 
    flex: 1; 
 
    border: 1px solid red; 
 
} 
 
li.middle-item { 
 
    flex: 0 0 100px; 
 
    background-color: #ccc; 
 
}

<ul class="flex-holder"> 
 
    <li>Item 1</li> 
 
    <li>Some text</li> 
 
    <li class="middle-item">Middle</li> 
 
    <li>Very long text item bla bla bla bla bla bla.</li> 
 
    <li>Test</li> 
 
</ul>

---

Auch können Sie die mittleren Verschachtelungselemente erzwingen. Zum Beispiel:

body { 
 
    background: url(http://placehold.it/1x200) no-repeat center; 
 
    } 
 
    
 
    .flex-holder { 
 
    display: flex; 
 
    list-style: none; 
 
    padding: 0; 
 
    } 
 
    
 
    .flex-holder li { 
 
    display: flex; 
 
    flex: 1; 
 
    border: 1px solid red; 
 
    justify-content: flex-end; 
 
    padding: 0 1em; 
 
    } 
 
    
 
    .flex-holder li div { 
 
    border: 1px solid green; 
 
    padding: 0 1em; 
 
    } 
 
    
 
    li.middle-item { 
 
    flex: 0 0 auto; 
 
    background-color: #ccc; 
 
    text-align: center; 
 
    justify-content: center; 
 
    } 
 
    
 
    li.middle-item ~ li { 
 
    justify-content: flex-start; 
 
    }

<ul class="flex-holder"> 
 
    <li> 
 
    <div>Item 1 </div> 
 
    <div> Some item</div> 
 
    </li> 
 
    <li class="middle-item">Middle</li> 
 
    <li> 
 
    <div> 
 
     Very long text item </div> 
 
    </li> 
 
</ul>