垂直對齊flexbox項目並保持相同寬度

Question

我有以下flexbox，我嘗試垂直對齊項目並保持每列的寬度相同。

比方說，我有一個行中的10個項目，但內部容器應該是可見的只有4個項目其餘被隱藏溢出。所有這些項目被分裂爲相同的寬度在父容器

的寬度的功能它不似乎工作：

.container { 
 
    width: 100%; 
 
} 
 
.container .slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: auto; 
 
    padding: auto; 
 
} 
 
.container .slider[data-columns="1"] ul { 
 
    width: 100%; 
 
} 
 
.container .slider[data-columns="1"] ul li { 
 
    width: 100%; 
 
} 
 
.container .slider[data-columns="2"] ul { 
 
    width: 200%; 
 
} 
 
.container .slider[data-columns="2"] ul li { 
 
    width: 50%; 
 
} 
 
.container .slider[data-columns="3"] ul { 
 
    width: 300%; 
 
} 
 
.container .slider[data-columns="3"] ul li { 
 
    width: 33.33333%; 
 
} 
 
.container .slider[data-columns="4"] ul { 
 
    width: 400%; 
 
} 
 
.container .slider[data-columns="4"] ul li { 
 
    width: 25%; 
 
} 
 
.container .slider[data-columns="5"] ul { 
 
    width: 500%; 
 
} 
 
.container .slider[data-columns="5"] ul li { 
 
    width: 20%; 
 
} 
 
.container .slider[data-columns="6"] ul { 
 
    width: 600%; 
 
} 
 
.container .slider[data-columns="6"] ul li { 
 
    width: 16.66667%; 
 
} 
 
.container .slider[data-columns="7"] ul { 
 
    width: 700%; 
 
} 
 
.container .slider[data-columns="7"] ul li { 
 
    width: 14.28571%; 
 
} 
 
.container .slider[data-columns="8"] ul { 
 
    width: 800%; 
 
} 
 
.container .slider[data-columns="8"] ul li { 
 
    width: 12.5%; 
 
} 
 
.container .slider[data-columns="9"] ul { 
 
    width: 900%; 
 
} 
 
.container .slider[data-columns="9"] ul li { 
 
    width: 11.11111%; 
 
} 
 
.container .slider[data-columns="10"] ul { 
 
    width: 1000%; 
 
} 
 
.container .slider[data-columns="10"] ul li { 
 
    width: 10%; 
 
} 
 
.container .slider ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
} 
 
.container .slider ul li { 
 
    height: 200px; 
 
    list-style: none; 
 
} 
 
.container .slider ul li:nth-child(odd) { 
 
    background-color: #34495e; 
 
}

<div class="container"> 
 
<div class="slider" data-columns ="4"> 
 
    <ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</div> 
 
</div>

什麼我在我的代碼失蹤？

Codepen示範這裏：http://s.codepen.io/deroccha/debug/GqvvEm

Answer 1

要垂直對齊的柔性物品，在容器上切換flex-direction從row到column。

.container .slider ul { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; /* ADJUSTMENT */ 
    flex-wrap: nowrap; 
} 

或者，你可以允許柔性物品包裹時，沒有就行了足夠的空間：

.container .slider ul { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; /* ADJUSTMENT */ 
} 

---

第二個答案基於改進的問題：

禁止彈性物品收縮：

柔性容器的初始設置是flex-shrink: 1。這意味着flex項目可以縮小（當flex-wrap爲nowrap時，防止它們溢出容器）。

添加flex-shrink: 0禁用收縮功能。

有關詳細信息，請參閱「的flex-shrink因素」節這樣的回答：https://stackoverflow.com/a/34355447/3597276

.container .slider { 
 
    overflow: hidden; 
 
    margin: auto; 
 
} 
 

 
.container .slider[data-columns="4"] ul { 
 
    width: 400%; 
 
} 
 

 
.container .slider[data-columns="4"] ul li { 
 
    flex: 0 0 6.25%; /* don't grow, don't shrink, remain 6.25% width (25%/4) */ 
 
} 
 

 
.container .slider ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.container .slider ul li { 
 
    height: 200px; 
 
    list-style: none; 
 
    background-color: red; 
 
} 
 

 
.container .slider ul li:nth-child(odd) { 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="slider" data-columns="4"> 
 
     <ul> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

變化.container .slider ul CSS display: flex;到display: block;