Question

我正在使用Flexbox构建水平导航菜单。项目可以在左侧（例如 Home 和 Other item ）或在右侧（例如 About 和 Contact ）对齐>）：

我将 About 和 Contact 项目放置在flexbox的右端，方法是将它们与div放在margin-left: auto中。只要不涉及包装，此方法就可以正常工作。但是，使用自动换行，它看起来像这样：

原因很明显，margin-left: auto仍位于 About 项目的前面。如何确保包装到位后， About 项也从左侧开始？包装时有什么方法可以将左边距重置为零？

可以在此小提琴中找到代码：https://jsfiddle.net/stefan_at_wpf/b95qek8j/1/

对于存档，这是它的副本：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="mystyle.css" type="text/css" />
    </head>

    <body>
        <nav class="nav-hor">
            <a href="link1">Home</a>
            <a href="link2">Other item</a>

            <div class="right">
                <a href="link3">About</a>
                <a href="link4">Contact</a>
            </div>
        </nav>
    </body>
</html>

CSS mystyle.css：

body {
    margin: 0px;
}

.nav-hor {
    display: flex;
    background-color: grey; 
    flex-wrap: wrap;
}

.nav-hor a {
    display: block;   
    padding: 10px;
    text-decoration: none;
    color: black;
}

.nav-hor .right {
    display: flex;
    margin-left: auto;
    flex-wrap: wrap;
}

Answer 1

将边距自动移动到第二个链接。您还可以删除最后两个链接的包装器：

body {
  margin: 0px;
}

.nav-hor {
  display: flex;
  background-color: grey;
  flex-wrap: wrap;
}

.nav-hor a:nth-child(2) {
  margin-right: auto;
}

.nav-hor a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

<nav class="nav-hor">
  <a href="link1">Home</a>
  <a href="link2">Other item</a>

  <a href="link3">About</a>
  <a href="link4">Contact</a>
</nav>

Answer 2

为什么不使用CSS Media Query ..？在您的CSS文件的末尾添加此媒体查询，并找到最小宽度的最佳值

generateRandomImageData :: 3840x2160
numberOfIterations = 100

      32bit       64bit
     336.906ms   344.251ms   divideImageDataWithParam
    1832.120ms  6395.861ms   divideImageDataWithParam single-thread parallel=false    
     387.152ms  1204.302ms   divideImageDataWithParam multi-threaded parallel=true

包装时，

查找最大宽度[窗口宽度]值。希望你能帮忙这个谢谢。

重新设置包装时剩余的边距？

2 个答案: