justify-content: space-between 未能按预期对齐元素

Posted 2023-03-05

【中文标题】justify-content: space-between 未能按预期对齐元素

【英文标题】：justify-content: space-between failing to align elements as expected

【发布时间】：2016-06-13 15:32:20

【问题描述】：

我需要使用 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" >
      </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 有两个子元素。

我将以下 CSS 应用于 .container 元素：

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

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

我想要的行为是两个子元素应该在左右边缘，这可以使用浮动来实现，即，我将一个子元素向左浮动一个向右。

此外，如果您应用 flex-start 和 flex-end，元素将被拉到边缘，但使用 flex-start 和 flex-end，两个元素都将被拉到一侧。因此我需要使用space-between。

谁能告诉我为什么space-between 不起作用？这个错误在我的整个网站上造成了一个巨大的对齐问题，请有人告诉我我做错了什么。

【问题讨论】：

我认为content: " "; 会影响它不起作用space-between。尝试找到解决方案。一旦得到然后让你知道。在此之前，请尝试找到自己或其他人可能有解决方案。

@ketan 在这里检查最后一个示例sketchingwithcss.com/samplechapter/cheatsheet.html，我现在正在使用该解决方案.. 但实际上，空格之间应该可以工作！我不知道为什么不是！

【参考方案1】：

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

这是您的弹性容器：

徽标和导航菜单与 justify-content: space-between 对齐，但未位于相对边缘。对齐看起来更像space-around。

---

这是 Bootstrap 的 ::before 和 ::after 伪元素（或伪弹性项目）：

如Firefox documentation中所述：

流入::after 和::before 伪元素是弹性项目。

---

让我们在伪类中添加一些内容：

就像在汽车旅馆房间里照黑灯一样，你会看到很多你希望不存在的东西。

---

删除（或覆盖）伪元素，您的问题就消失了：

---

更多关于弹性容器和伪元素的细节：

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）

【参考方案2】：

由于 flex 定位项仅直接响应子元素。用 div 将 .container 类下的所有内容包装起来，并为该 div 赋予 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>

【参考方案3】：

<style> #logo
 position:absolute;
 float:left;
 left:10px;

</syle>
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" >

enter link description here