html - flex-grow 不以全宽显示容器中的元素

Question

我有一个 ul 容器和 li 菜单项。容器是 100% 宽度，li 元素是父元素的 50% 宽度。 Parent 设置为显示 flex，flex 方向为 column。现在这些元素是 flex parent 宽度的一半，但是当我将子元素设置为 flex-grow: 1 时，似乎什么都没有发生。

menu-secondary-container ul {
  display: flex;
  flex-direction: column;
}

#menu-secondary li {
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid white;
  line-height: 2.3;
  width: 50% !important;
  padding: 0;
  flex-grow: 1;
}

我希望两个元素在一行中，总共两行。

Answer 1

正如我在上面评论的那样，您需要像这样修复您的代码，以便每行有 2 个元素:

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid #000;
  line-height: 2.3; 
  flex: 0 1 50%; /* Or flex-basis:50% Or width:50% */
  padding: 0;
}

<ul>
  <li>aaaa</li>
  <li>bbb</li>
  <li>cccc</li>
  <li>ddd</li>
</ul>