证明内容：空间之间没有对齐元素如预期

Question

我需要使用Flexbox的居中我的导航，所以我想出了以下内容：

.navbar-brand > img { 
 
    width: 100px; 
 
} 
 
.navbar-default { 
 
    background-color: #fff; 
 
    border-color: #fff; 
 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #464646; 
 
    text-transform: uppercase; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus, 
 
.navbar-default .navbar-nav > li > a:active { 
 
    color: #727272; 
 
} 
 
.navbar-default .navbar-nav > li:not(.active) > a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 30%; 
 
    right: 30%; 
 
    height: 1px; 
 
    background: #ed1c24; 
 
    opacity: 0; 
 
    -webkit-transform: translateY(10px); 
 
    -ms-transform: translateY(10px); 
 
    -o-transform: translateY(10px); 
 
    transform: translateY(10px); 
 
    -webkit-transition: all .3s; 
 
    -o-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover:before { 
 
    opacity: 1; 
 
    -webkit-transform: none; 
 
    -ms-transform: none; 
 
    -o-transform: none; 
 
    transform: none; 
 
} 
 
.navbar-default .navbar-nav > li:first-child > a { 
 
    font-weight: 700; 
 
} 
 
.navbar-default .navbar-nav > li.active > a { 
 
    background: #ed1c24; 
 
    color: #fff; 
 
    padding-top: 25px; 
 
    padding-bottom: 25px; 
 
    position: relative; 
 
    -webkit-transition: all .3s; 
 
    -o-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 
.navbar-default .navbar-nav > li.active > a:hover, 
 
.navbar-default .navbar-nav > li.active > a:focus, 
 
.navbar-default .navbar-nav > li.active > a:active { 
 
    background: #e0222a; 
 
    color: #fff; 
 
} 
 
.navbar-default .navbar-nav > li.active:hover > a:after { 
 
    bottom: 0; 
 
} 
 
.navbar-default .navbar-nav > li.active > a:after { 
 
    font-family: FontAwesome; 
 
    content: '\f078'; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    font-size: 0.6em; 
 
    /*opacity: 0.8;*/ 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%); 
 
    -ms-transform: translateX(-50%); 
 
    -o-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    -webkit-transition: all .3s; 
 
    -o-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 
/* use flexbox to center align nav elements above 992px */ 
 

 
@media (max-width: 992px) { 
 
    .navbar-default .navbar-nav > li > a { 
 
    text-align: center; 
 
    } 
 
    .navbar-collapse { 
 
    max-height: 350px; 
 
    overflow-y: hidden; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .navbar-default { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    } 
 
    .navbar-default { 
 
    min-height: 100px; 
 
    } 
 
    .navbar-default .navbar-right { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
    .navbar-default > .container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html" class="navbar-brand"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo"> 
 
     </a> 
 
    </div> 
 
    <!-- Collection of nav links and other content for toggling --> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="consulting.html">CONSULTING</a> 
 
     </li> 
 
     <li><a href="devices.html">Medical Devices</a> 
 
     </li> 
 
     <li><a href="">Servises</a> 
 
     </li> 
 
     <li><a href="">News</a> 
 
     </li> 
 
     <li><a href="">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

FIDDLE HERE

正如您从HTML中看到的那样，.container有两个子元素。

我已经向.container元以下的CSS：

.navbar-default > .container{ 
     display: flex; 
     align-items:center; 
     justify-content:space-between; 
    } 

问题是space-between不会使容器的两个子元素是在容器的左，右边缘。

我想要的行为是两个子元素应该在左侧和右侧边缘，这可以通过使用浮动来实现，I.E.我将一个孩子浮动到左侧，另一个向右浮动。

此外，如果你申请flex-start和flex-end的元素将被拉到边上，但是，与flex-start和flex-end，这两个元素将被拉到一边。因此我需要使用space-between。

有人可以告诉我为什么space-between不工作？这个bug在我的整个网站上造成了巨大的对齐问题，请有人告诉我我做错了什么。

Answer 1

问题是与Bootstrap样式表相冲突，它会在您的flex容器中放置伪元素。这导致space-between计算多个弹性项目，而不仅仅是两个。

这是你的Flex容器：

标志和导航菜单与justify-content: space-between一致，但不定位在相对的边缘。对齐看起来更像space-around。

---

这里是引导的::before和::after伪元素（或伪-FLEX项目）：

作为Firefox documentation指出：

在 - 流::after和::before伪元素是flex项目。

---

让我们把在假点一些内容：

就像在一个旅馆房间闪耀着黑色的光，你看到了很多的东西，你想不那里。

---

删除（或重写）伪元素，你的问题了：

---

更多关于Flex容器和伪细节元素：

• Pseudo elements breaking justify-content: space-between in flexbox layout
• Properly sizing and aligning the flex item(s) on the last row
• Methods for Aligning Flex Items along the Main Axis（见专栏＃81）

Answer 2

<style> #logo{ 
position:absolute; 
float:left; 
left:10px; 
} 
</syle> 
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo"> 

enter link description here

Answer 3

由于柔性定位的项目只是为了仅直接子元素回应。使用div将.container类中的所有内容都包装起来，并给该分区position: flex和justify-content: space-between属性。

例子：

<nav> 
<div class="container"> 
    <div class="wrapper"> 
     ... 
    <div> 
</div> 
</nav> 

<style> 
.wrapper { 
    position: flex; 
    justify-content: space-between; 
} 
</style>