How can I make wrapped list columns all the same width?-CodePudding

When the list items reach to the bottom of container next items show in the next column. In this case container width divide between 3 columns. How can I change column width? i want change column width manually not like the result (automatic divide container width between column)

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: pink;
  border: 1px solid #fff;
}

<ul>
  <li><a href="">this is row</a></li>
  <li><a href="">this is a longer row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
</ul>

and result:

CodePudding user response：

The column width is being reflected from the width of your lis. With that being said, you can change the column width by changing the width on li.

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: calc(100%/3);
  border: solid 1px orange;
}

<ul>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
</ul>

CodePudding user response：

You can change the column width by adding

width: 100px;

or whatever width you want to specify in the ul selector in your css