垂直对齐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;