如何扩大弹性项目的空白页边距？

Question

深灰色区域可点击，但蓝色边距没有任何动作。我如何展开其余较小的项目以填充 space?

div.scrollmenu {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #333;
    overflow: auto;
    flex-wrap: nowrap;

}

div.scrollmenu a {
    display: flex;
    color: white;
    text-align: left;
    padding: 14px;
    text-decoration: none;
    margin: auto;
    min-width: 25%;
    max-width: 25%;
}

Answer 1

~~将 align-items: stretch; 属性添加到您的 div.scrollmenu 并~~ 稍微调整一下您的代码。

div.scrollmenu {
  display:flex;
  /* align-items: stretch; */ /* redundant */
  background-color: #333;
  flex-wrap: nowrap;
}

div.scrollmenu a {
  display: flex;
  align-items: center;
  /* uncomment this if you want them to be centered horizontally  */
  /*justify-content: center;*/
  padding: 1 14px;
  color: white;
  text-align: left;
  text-decoration: none;
  flex: 1;
}

希望对您有所帮助。

EDIT 你甚至不需要 align-items: stretch 因为我相信那是默认值属性因为即使你省略它结果也是一样的.

如何扩大弹性项目的空白页边距？

How can I expand the empty margins on flex items?

css

expand

margin

navbar

flexbox