How to make vertical list 2 column using flexbox [duplicate] - html

Question

This question already has an answer here:
Break unordered list items across columns with flexbox
(1 answer)
Closed 4 years ago.
I try to make 2 column list and vertical order using flexbox
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
see image for the example

Answer 1

Here's a simple wrapping column layout in flexbox.
Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>

Answer 2

The HTML is straight-forward:
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
Using floats, the CSS for this would be:
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
This gives us four columns that wrap. We can also add a little bit of style to give it a more pleasing look:
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}

Answer 3

Hope this helps.
.list-one {
display: inline-block;
float: left;
list-style-type: none;
}
.list-two {
display: inline-block;
float: left;
list-style-type: none;
}
li {
margin-top: 10px;
}
.line-item {
background-color: grey;
height: 50px;
display: block;
color: #fff;
width: 50px;
padding: 30px 20px 0px 20px;
text-align: center
}
<ul class="list-one">
<li><span class="line-item">1</span></li>
<li><span class="line-item">2</span></li>
<li><span class="line-item">3</span></li>
<li><span class="line-item">4</span></li>
<li><span class="line-item">5</span></li>
</ul>
<ul class="list-two">
<li><span class="line-item">6</span></li>
<li><span class="line-item">7</span></li>
<li><span class="line-item">8</span></li>
<li><span class="line-item">9</span></li>
<li><span class="line-item">10</span></li>
</ul>