How To Make Vertical List 2 Column Using Flexbox

I try to make 2 column list and vertical order using flexbox

• item 1
• item 2
• item 3
• item

Solution 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>

Solution 2:

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: 30px20px0px20px;
  text-align: center
}

<ulclass="list-one"><li><spanclass="line-item">1</span></li><li><spanclass="line-item">2</span></li><li><spanclass="line-item">3</span></li><li><spanclass="line-item">4</span></li><li><spanclass="line-item">5</span></li></ul><ulclass="list-two"><li><spanclass="line-item">6</span></li><li><spanclass="line-item">7</span></li><li><spanclass="line-item">8</span></li><li><spanclass="line-item">9</span></li><li><spanclass="line-item">10</span></li></ul>

Solution 3:

The HTML is straight-forward:

<divclass="items"><divclass="item">Heriberto Nickel</div><divclass="item">Brittaney Haliburton</div><divclass="item">Maritza Winkler</div><divclass="item">Carmon Rigg</div><divclass="item">Alice Marmon</div><divclass="item">Lyman Steakley</div><divclass="item">Zenia Correa</div></div><divclass="items"><divclass="item">Heriberto Nickel</div><divclass="item">Brittaney Haliburton</div><divclass="item">Maritza Winkler</div><divclass="item">Carmon Rigg</div><divclass="item">Alice Marmon</div><divclass="item">Lyman Steakley</div><divclass="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;
}