我可以在flexbox的行之间有一行吗？ [英] Can I have a line between rows of flexbox?

问题描述

我有一个水平导航，这有点长，需要重新排列窄显示。我使用flexbox使它回流到多行。

I have a horizontal navigation, which is somewhat long, and needs to be rearranged for narrow displays. I used flexbox to make it reflow into multiple rows.

但是对于许多行，导航项之间的区别并不那么明显。我试着在顶部给他们一个边框，它有点工作 - 但是边界当然只能通过单个导航选项可见，而不是在所有flexbox行之间创建一个好的分界线。

But with many rows, the division between the navigation items is not so obvious. I tried giving them a border on top, and it kinda works - but the border is, of course, only visible over the individual navigation options, not creating a nice dividing line between all flexbox rows.

请查看完整页面的代码段，当其在帖子中查看时出现显示问题。或者使用这个小提琴。您可能需要将浏览器窗口缩小才能看到多行导航。

Please view the snippet full page, there is a display problem when it's viewed within the post. Or use this fiddle. You may have to make your browser window narrow to see the navigation in multi row.

header {
    height: 3em;
    background-color: #fff;
}


#main {
    height: 9em;
    background-color: #5987d1;
}

footer {
    height: 3em;
    background-color: #a8a8a8;
    border-top: 1px solid #0047b9;
}

ul.horizontal-nav {
    background: rgba(72, 72, 72, 1);
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
    list-style: none;
}

li.NavigationLi2, li.selected-branch-root {
    padding: 0.75em 1em;
    display: block;
    border-top: 1px solid #2662c3;
}

li.selected-branch-root {
    background: #2662c3;
}

li.NavigationLi2 > a, li.NavigationLi2 > a:visited {
    color: #e6eeff;
    text-decoration: none;
    -ms-word-wrap: nowrap;
    word-wrap: nowrap;
}

li.selected-branch-root > a, li.selected-branch-root > a {
    color: #fff;
    text-decoration: none;
    -ms-word-wrap: nowrap;
    word-wrap: nowrap;
}

<header>
</header>
<nav class="horizontal-nav">
    <ul class="horizontal-nav">
                <li class="selected-branch-root"><a href="/Search">Search</a>
                </li>
                <li class="NavigationLi2"><a href="/My%20models">My models</a>
                </li>
                <li class="NavigationLi2"><a href="/Account">Account</a>
                </li>
                <li class="NavigationLi2"><a href="/Management%20Tools">Management</a>
                </li>
                <li class="NavigationLi2"><a href="/Administration">Administration</a>
                </li>
                <li class="NavigationLi2"><a href="/Help">Help</a>
                </li>
        </ul>
</nav> 
<section id="main">
</section>
<footer>
</footer>

推荐答案

这里是我做的让我说一个flexbox容器里面有3个divs

Here is what I do lets say I have a flexbox container with 3 divs inside

<div class="flex">
  <div>
    <h2>Free Shipping</h2>
  </div>
  <div>
    <h2>Everything In Stock</h2>
  </div>
  <div>
    <h2>Largest Inventory</h2>
  </div>
</div>

我玩的是为了使一条线在3 div / flex项目只是简单地在div之间添加另一个flex项目像这样：

What I am playing with is in order to make a line right in the middle of the 3 div's / flex items simply just add another flex item between the divs like this:

<div class="flex">
  <div>
    <h2>Free Shipping</h2>
  </div>

  <img src="lib/xxx/img/ydivider.png" alt="divider"/>

  <div>
    <h2>Everything In Stock</h2>
  </div>

  <img src="lib/xxx/img/ydivider.png" alt="divider"/>  

  <div>
    <h2>Largest Inventory</h2>
  </div>
</div>

现在你可以看到我们有5个flex项目而不是3.我发现的2个额外的flex项目间隔正确地在中间。记住，如果你去到一个断点，你显示为列，你将需要一个水平img在那一点。

You can now see we have 5 flex items instead of 3. The 2 additional flex items I find are spaced correctly to be in the middle. Keep in mind if you go to to a breakpoint where you display as columns you will need a horizontal img at that point.

这篇关于我可以在flexbox的行之间有一行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！