flex-grow不以全宽显示容器中的项目

Question

我有一个ul容器和li菜单项。容器的宽度是父元素的100%，li项的宽度是父元素的50%。父项设置为显示flex，flex方向为列。现在项的宽度是flex父项的一半，但是当我将子项设置为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>

​