Question

考虑基本的bootstrap导航栏标记：

 <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 logos在左边彼此相邻，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

您可能必须这样做：

更改为justify-content: flex-start

navbar-brand-left

从flex: 1，brand-img，brand-logos和phone-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>

Answer 2

使用justify-content: space-between;“展开”顶层，然后使用传统的CSS将文字放在一行......

https://jsfiddle.net/v4zxccvv/

.navbar-header {
  display: flex;
  justify-content: space-between;
}

.brand-img,
.brand-logos,
#phone1,
#phone2 {
  display: inline;
}

无法使flex-end正常工作

2 个答案: