[css] Flexbox 사용 <ul><li></li></ul> 네모박스 세로정렬

* display: flex; align-content: flex-start; flex-direction: column; flex-wrap: wrap 

flex-wrap

flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있다.

ul : 부모 엘리먼트 - display: flex를 설정 한 부모 엘리먼트

 li : 자식 엘리먼트 - Flex container 내의 자식 엘리먼트

.divUl{display: flex; align-content: flex-start; flex-direction: column; flex-wrap: wrap}
.divUl li{border: 1px solid gold; list-style: none; margin-bottom:10px; padding: 30px;color: red; background-color: #fff8b6;}

<ul class="divUl">
  <li></li>
  <li></li>
  <li></li>
</ul>