플렉스 박스 아이템을 수직으로 정렬하고 동일한 너비를 유지하십시오.

Question

다음 플렉스 박스에서 항목을 수직으로 정렬하고 각 열에 대해 동일한 너비를 유지하려고합니다.

연속으로 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

display: block;로는 row에서 column에 컨테이너에 flex-direction을 전환, 수직 플렉스 항목을 정렬합니다. 라인에 공간이 충분하지 않을 때

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