如何使包装列表列全部相同的宽度？

Question

当列表项目到达容器底部时，下一列中显示的下一列中显示。在这种情况下，容器宽度在3列之间划分。如何更改列宽度？ 我想手动更改列宽度 不像结果（列之间的自动分配容器宽度）

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>

和结果：

Answer 1

列width正在从li s的宽度中反射。话虽如此，您可以通过更改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>

Answer 2

您可以像这样分裂-100/12。如果您将100除以12，我们将获得8.333333333333333。现在，您只需乘到4，然后您将获得3等级列的值。

例如：8.33333333333333 * 4 = 33.33333333333333。

最后，只需添加百分比像这样-33.33％

在您的情况下您的css应该看起来像这样：

    * {
        /*to adjust paddings on columns. you can learn more about box-model in css*/
        box-sizing: border-box;
    }
    
    ul {
        display: flex;
/*no need to make flex direction : column. by default it applies row value and this will work fine.*/
        /* flex-direction: column; */
        flex-wrap: wrap;
/*currently no need of max-height. It is optional depends on your design.*/
        /* max-height: 200px; */
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        background: pink;
        border: 1px solid #fff;
        /*0 is grow 0 is shrink 33.33% is basis*/
        flex: 0 0 33.33%;
    }

我希望这会有所帮助。

Answer 3

来更改列宽度

width: 100px;

您可以通过添加或要在CSS中的ul选择器中指定的任何宽度