justify-content:无法按预期对齐元素之间的空间 [英] justify-content: space-between failing to align elements as expected

问题描述

我需要使用 flexbox 来使我的导航居中，因此我想出了以下内容:

.navbar-brand >图片{宽度:100px；}.navbar-default {背景色:#fff;边框颜色:#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 >立>一种 {颜色:#464646；文本转换:大写；}.navbar-default .navbar-nav >立>答:悬停，.navbar-default .navbar-nav >立>一:专注，.navbar-default .navbar-nav >立>一个:主动{颜色:#727272；}.navbar-default .navbar-nav >li:not(.active) >一:之前{内容: '';位置:绝对；底部:0；左:30%；正确:30%；高度:1px；背景:#ed1c24；不透明度:0；-webkit-transform: translateY(10px);-ms-transform: translateY(10px);-o-transform: translateY(10px);变换:translateY(10px);-webkit-transition:所有 .3s；-o-transition:所有 .3s；过渡:所有 .3s；}.navbar-default .navbar-nav >立>一个:悬停:之前{不透明度:1；-webkit-transform:无；-ms-transform:无；-o-变换:无；变换:无；}.navbar-default .navbar-nav >li:第一个孩子>一种 {字体粗细:700；}.navbar-default .navbar-nav >li.active >一种 {背景:#ed1c24；颜色:#fff;填充顶部:25px；填充底部:25px；位置:相对；-webkit-transition:所有 .3s；-o-transition:所有 .3s；过渡:所有 .3s；}.navbar-default .navbar-nav >li.active >答:悬停，.navbar-default .navbar-nav >li.active >一:专注，.navbar-default .navbar-nav >li.active >一个:主动{背景:#e0222a；颜色:#fff;}.navbar-default .navbar-nav >li.active:悬停>一个:{底部:0；}.navbar-default .navbar-nav >li.active >一个:{字体系列:FontAwesome；内容:'f078';位置:绝对；底部:5px；字体大小:0.6em；/*不透明度:0.8；*/左:50%；-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);变换:translateX(-50%);-webkit-transition:所有 .3s；-o-transition:所有 .3s；过渡:所有 .3s；}/* 使用 flexbox 将导航元素居中对齐 992px 以上 */@media(最大宽度:992px){.navbar-default .navbar-nav >立>一种 {文本对齐:居中；}.navbar-collapse {最大高度:350px；溢出-y:隐藏；}}@media(最小宽度:992px){.navbar-default {显示:弹性；对齐项目:居中；对齐内容:间隔；}.navbar-default {最小高度:100px；}.navbar-default .navbar-right {显示:弹性；对齐项目:居中；}.navbar-default >.容器 {显示:弹性；对齐项目:居中；对齐内容:间隔；}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="容器"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="index.html" class="navbar-brand"><img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="标志"></a>

<!-- 用于切换的导航链接和其他内容的集合--><div id="navbarCollapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="index.html">首页</a><li><a href="consulting.html">CONSULTING</a><li><a href="devices.html">医疗设备</a><li><a href="">服务</a><li><a href="">新闻</a><li><a href="">联系我们</a>

</nav>

<小时>

这是 Bootstrap 的 ::before 和 ::after 伪元素(或伪弹性项目):

如

<小时>

让我们在伪代码中添加一些内容:

就像在汽车旅馆房间里点亮一盏黑灯，你会看到很多你希望没有的东西.

<小时>

删除(或覆盖)伪元素，您的问题就消失了:

<小时>

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

• 破坏 justify-content 的伪元素:flexbox 布局中的空格
• 在最后一行正确调整和对齐弹性项目的大小
• 沿主轴对齐 Flex 项目的方法(参见方框 #81)

I needed to use flexbox to center my navigation and hence I came up with the following:

.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

As you can see from the HTML , the .container has two child elements.

I have the following CSS applied to the .container element:

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

The problem is space-between doesn't make the two child elements of the container to be at the left and right edges of the container.

The behaviour that I want is that the two child elements should be on the left and right edge, this can be achieved using floats, I.E., I float one child to the left and one to the right.

Also if you apply flex-start and flex-end the elements will be pulled to the edge but, with flex-start and flex-end, both elements will be pulled to one side. Hence I need to use space-between.

Can somebody tell me why is space-between not working ? This bug is causing a huge alignment issue on my whole site, please somebody tell me what am I doing wrong.

解决方案

The problem is a conflict with the Bootstrap stylesheet, which places pseudo-elements in your flex container. This causes space-between to calculate multiple flex items as opposed to just two.

Here's your flex container:

The logo and nav menu are aligned with justify-content: space-between, but are not positioned at opposite edges. The alignment looks more like space-around.

---

Here's Bootstrap's ::before and ::after pseudo-elements (or pseudo-flex items):

As noted in Firefox documentation:

In-flow ::after and ::before pseudo-elements are flex items.

---

Let's put some content in the pseudos:

Like shining a black light in a motel room, you see a lot of stuff you wish wasn't there.

---

Remove (or override) the pseudo-elements and your problem is gone:

---

More details about flex containers and pseudo-elements:

• 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 (see Box #81)

这篇关于justify-content:无法按预期对齐元素之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！