Question

我正在使用flexbox进行导航，我似乎无法让我的边框适用于为列换行指定的媒体查询。

我希望边框完全跨越设备宽度，例如我希望边框从左边一直到设备右边的所有方向，我希望每个元素占据一行' '在设备上，但目前边界仅延伸一半，而其他一些li元素共享一行，而其他元素则没有，我不太清楚为什么。即使我让a显示块，它也无效。我也试过为一个元素做100％的flex基础。

编辑：我想我想出了定位。我做了#nav ul。不只是#nav列换行。但是，遗憾的是，我仍然遇到了边境问题。

#nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  margin: 0;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  background-color: orange;
}
#nav li a {
  color: white;
  margin: 15px;
  padding: 5px;
  display: block;
  ;
  text-decoration: none;
  font-size: 24px;
  font-family: courier;
}
#nav li {
  list-style: none;
}
#nav ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  margin: 0;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
@media all and(max-width: 800px) {
  #nav {
    justify-content: space-around;
  }
}
@media all and (max-width: 500px) {
  #nav {
    flex-flow: column wrap;
    padding: 5px;
  }
  #nav li a {
    flex: 1 100%;
    display: block;
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
}

<div id="nav">
  <ul>
    <li> <a href="#">Calendar </a></li>
    <li> <a href="#">Events </a></li>
    <li> <a href="#">Hours </a></li>
    <li> <a href="#">Contact </a></li>
    <li> <a href="#">About </a></li>
  </ul>
</div>

Answer 1

尝试重置ul元素上的默认填充。

ul {
  padding-left: 0;
}

如果需要，

还会重置body上的默认边距。

body {
  margin: 0;
}

对于flexbox部分，您应在display: flex;上设置#nav ul，而不是#nav。您不需要在#nav实际设置任何样式。如果您希望每个li在媒体查询中占据100％的宽度，则可以将弹性项目设置为flex: 1 1 100%;，例如下面的小提琴。

@media all and (max-width: 500px) {
  #nav li {
    flex: 1 1 100%;
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
}

<强> jsFiddle

移动边框宽度为100％的Flexbox

1 个答案: