html - 无法使柔性端正常工作

Question

考虑基本的引导导航栏标记:

 <div class="navbar-header">
    <div class="navbar-brand-left">
        <div class="brand-img">Logo here</div>
        <div class="brand-logos">more stuff here</div>
    </div>
    <div class="navbar-brand-right">
        <div id="phone1">phone number 123</div>
        <div id="phone2">phone number 123</div>
    </div>

在这里，我希望 brand-img 和 brand logo 保持在左侧，phone1 和 phone2 保持在右侧彼此相邻。 为此，我将 display:flex 应用于主容器 navbar，同时也应用于左侧和右侧的两个容器 navbar-brand-left 和 navbar-brand-right 以便它们内部的元素也会受到影响。

我得到的是所有元素都分散开来。

这是CSS:

     .navbar-header{
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    flex-direction: row;
    }

    .navbar-brand-left{
    flex: 1;
    height:42px;
    display:flex;
    align-self:flex-start;
    align-items:center;
    justify-content:space-between;
    flex-direction: row;
    }

    .brand-img{
    flex:1;
    }

   .brand-logos{
    flex:1; 
    margin-left:1em;
    }

    .navbar-brand-right{
    font-size:1.2em;
    height:42px;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-direction: row;
    align-self:flex-end;
    }

    #phone1{
    flex:1;
    text-align:right;
    justify-content:flex-end;
    } 

    #phone2{
    flex:1;
    text-align:right;
    justify-content:flex-end;
    }

我添加了比我需要的更多的 flex 指令，因为我正在努力使这项工作正常进行。我知道理论上它应该用更少的钱工作。

这是jsFiddle .

如您所见，元素不会停留在末尾或开头，而是倾向于导航到中间。

space- Between 和 flex-end 就像它们不存在一样？它们可以被完全删除。

Answer 1

您可能必须这样做:

1. 将navbar-brand-left更改为justify-content: flex-start

2. 从 brand-img、brand-logos、phone-1 中删除 flex: 1和phone-2

请参阅下面的演示:

.navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.navbar-brand-left {
  flex: 1;
  height: 42px;
  display: flex;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;/*CHANGED*/
  flex-direction: row;
}
.brand-img {
  /*flex: 1;*/
}
.brand-logos {
  /*flex: 1;*/
  margin-left: 1em;
}
.navbar-brand-right {
  font-size: 1.2em;
  height: 42px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  align-self: flex-end;
}
#phone1 {
  /*flex: 1;*/
  text-align: right;
  justify-content: flex-end;
}
#phone2 {
  /*flex: 1;*/
  text-align: right;
  justify-content: flex-end;
}

<div class="navbar-header">
  <div class="navbar-brand-left">
    <div class="brand-img">Logo here</div>
    <div class="brand-logos">more stuff here</div>
  </div>
  <div class="navbar-brand-right">
    <div id="phone1">phone number 123</div>
    <div id="phone2">phone number 123</div>
  </div>
</div>