Question

我正在尝试找到执行以下操作的最佳方法：我已经创建了大量的导航链接，但是当缩小屏幕大小时，弹性项目之间的空间有时会显得太远，“ |”在flex项目下降到下一行之前，应该出现在flex项目之间的符号可能出现在行的末尾，并且（可能是我的浏览器）flex项目似乎在缩小它后使浏览器更宽时换行（即标签内的文字可以在不同的行上。

有没有好办法解决这个问题？我假设显示为具有空格的flex，因为内容对齐可以很好地将它们分开，但它有一些小的缺陷。

由于

.footer-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: pink;
}
.footer-links > a {
  flex-wrap: nowrap;
  background: orange;
}
.footer-links > a:nth-child(n+2) {
  padding: 0 1%;
  background: lightgreen;
}
.footer-links > a:last-child {
  padding-right: 0;
  background: red;
}
.footer-links > a:first-child {
  padding-right: 1;
  background: lightblue;
}
@media (min-width: 1024px) {
  .footer-links { justify-content: center }
}

<div class='footer-links'>
  <a>Home</a> | <a>Terms &amp; Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>

Answer 1

Flexbox按照你告诉它工作的方式工作。机器人听我们的时候很棒！

您的媒体查询明确指出，在1024px宽度之前的任何时间，仅证明内容space-between，因为这是在父类中设置的值及其继承的值。如果您希望它们更近，那么只需删除1240px +的媒体查询，使其适用于所有宽度，将页脚链接类中的justify-content属性更改为居中，它将相应地运行。

就管道符号（|）而言，如果你不希望它在它的兄弟姐妹之前断线，那么就不要让它成为兄弟姐妹，把它包含在兄弟姐妹中：

自：

<a>Home</a> |

要：

<a>Home |</a>

或更好，使用:after || :before伪类，如此is their intended use，默认为内联。或者也许重新构建您的代码更有意义，在这里您使用带有子项的<li>标记来显示您视觉中的事物列表，因此它不是父div的子项（页脚 - 链接）并成为父列表项的子项。这里有很多成功的机会，大部分都是你决定的，但是你应该考虑构建代码，原因很多，比如可访问性。屏幕阅读器不知道你的页脚链接类是按照它编写的方式导航元素。

为了直接回答这个问题，这里有一个psuedo类和中心对齐内容的例子：

＆＃13;

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: pink;
}

.footer-links>a {
  flex-wrap: nowrap;
  background: orange;
}

.footer-links>a:nth-child(n+2) {
  padding: 0 1%;
  background: lightgreen;
}

.footer-links>a:last-child {
  padding-right: 0;
  background: red;
}

.footer-links>a:first-child {
  padding-right: 1;
  background: lightblue;
}

/* new change, removed media query and added :after psuedo class for pipes*/
.footer-links a:not(:last-child):after {
  content: "|";
  background: pink;
  padding: 0 5px;
}

＆＃13;

<div class='footer-links'>
  <a>Home</a><a>Terms &amp; Conditions</a><a>Contact Us</a><a>Apps</a><a>Some Link</a><a>Contact Us</a><a>Apps</a>
</div>

＆＃13;

请注意，根据我上面链接的文档：

：before和：after伪元素从文档树中的元素继承任何可继承的属性。

所以你必须在你的环境中相应地改变背景颜色

Answer 2

在.footer-links我已添加flex-direction: row;并已删除
我还在.footer-links>a:first-child中发现了padding-right: 1; without the％'符号的错误。

.footer-links {
  display: flex;
  flex-direction: row; /* added */
  /* justify-content: space-between; */ /* removed */
  flex-wrap: nowrap; /* changed */
  background: pink;
}

.footer-links>a {
  flex-wrap: no-wrap;
  background: orange;
  white-space: nowrap; /* added */
}

.footer-links>a:nth-child(n+2) {
  padding: 0 1%;
  background: lightgreen;
}

.footer-links>a:last-child {
  padding-right: 0;
  background: red;
}

.footer-links>a:first-child {
  padding-right: 1%; /* added the % */
  background: lightblue;
}

@media (min-width: 1024px) {
  .footer-links {
    justify-content: center
  }
}

<div class='footer-links'>
  <a>Home</a> | <a>Terms &amp; Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>

此外，请考虑我所做的一些改变，使您的设计更好。随你随心所欲：）

<强> JSFiddle demo

间隔弹性项目的最佳方法

2 个答案: