플렉스 열은 줄 바꿈 될 때만 가운데입니다.

Question

플렉스 박스를 사용하여 열의 목록 항목을 표시하고 있습니다. 항목은 특정 높이 뒤에 열을 추가로 배치해야하며 열은 가로로 가운데에 배치해야하며 각 열의 목록 항목은 왼쪽 맞춤으로 지정해야합니다. 목록 높이를 제한하려면 max-height을 사용하고, 줄 바꿈을 구성하려면 flex-flow: column wrap을 사용하고 열을 가운데에 맞 추면 align-content: center을 사용하고 있습니다.

multi-column 해결책이 더 분명 할 수도 있지만 column-width 또는 column-count을 정의하고 싶지 않으므로 flexbox 솔루션을 선택했습니다. 항목 여러 열 바꿈 때

문제점
열은 좌우 중앙에있다. 열이 하나만있는 경우 열은 가운데 맞춤이 아닙니다. 나는 Chrome 10에서 Windows 10 Home과 MacOS Sierra 모두에서 이러한 동작을 보았습니다. 파이어 폭스에서는 내가 의도 한대로 보입니다 (아래 스크린 샷).

내가 누락 된 항목이 있습니까?
열을 가로로 놓고 브라우저간에 항상 중앙으로 배치하려면 어떻게합니까?

.filter_drop { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-content: center; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    max-height: 7em; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.filter_drop li { 
 
    margin: 0 1em 0 0; 
 
    line-height: 1.2; 
 
}

<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two </li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight </li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
</ul>

View on JSFiddle

---

크롬 63

파이어 폭스 57

01,

Answer 1

align-content은 플렉스 컨테이너에 여러 줄이있는 경우에만 작동합니다.

align-items 또는 align-self은 한 줄을 맞추기 위해 필요합니다. 당신이 관심이 있다면,/O를 할당 할 고정 폭 승 _Left의 align_에 대한 수정이

• How does flex-wrap work with align-self, align-items and align-content?

.filter_drop { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-content: center; 
 
    align-items: center; /* NEW */ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    max-height: 7em; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.filter_drop li { 
 
    margin: 0 1em 0 0; 
 
    line-height: 1.2; 
 
}

<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two </li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight </li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul> 
 
<ul class="filter_drop"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
</ul>