中間中間的柔性箱項目並證明其餘

Question

對於奇數個柔性項目，我希望中間的項目處於完美的中心位置，其他項目僅在其周圍流動。中間項目有固定的寬度，其餘的都是流動的，並且必須粘到中間項目上，所以填充物是固定的。

/* 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>

它實際上是可能的Flexbox的？如果不是，請提出另一種解決方案。

Answer 1

一個解決方案是在中間元素上使用position: absolute，並將它與transform: translate()居中，但在小窗口大小上會出現元素溢出，您可以使用媒體查詢來修復這些元素。

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

另一種解決方案，將讓結果接近預期的結果是包裝li的左邊和中間的李權在ul的並在其上設置flex: 1所以他們採取相同的大小和設置中間div始終居中。

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

的simpliest方式，如果middle-item是在中間（相同數量的分辯項目和左）：

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

---

你也可以強制中間的嵌套元素。例如：

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>