Flexbox 的增长或收缩使 div 略有变化

Question

我正在使用 flexbox 来设计这个导航栏

一切正常，除了两个问题：

• 第二个 div 会根据需要增长和缩小，但当内容变得太大时，第二个 div 会稍微向左移动。

• 我不明白如何在 div 2 下方放置第 4 个 div（它也应该像 div 2 一样增长和缩小），同时将所有四个 div 保持在同一行，因为这是我第一次使用 flexbox 实现。例如：
  第4个div应该在黑标的位置，文字和黑标都应该垂直居中。

html,
body {
  background-image: url("../images/theme1.png");
  background-repeat: repeat;
}

.conversationHeader {
  background-color: rgba(255, 255, 255, 0);
  border: none;
  min-height: 60px;
  display: block;
}

.headerOnScroll {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.2);
}

.horizontalLayout {
  width: 100%;
  margin: 0!important;
  padding: 0 9px!important;
  height: 68px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.conversationBackButton {
  font-size: 24px;
  width: 40px;
  height: 40px;
  padding: 8px!important;
  margin-right: 16px;
  color: #1D333E!important;
  display: inline-flex;
}

.conversationDetails {
  background-color: #cccccc;
  font-family: robotoregular, 'sans-serif'!important;
  font-size: 18px!important;
  color: #546770;
  flex-wrap: nowrap;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.avatar {
  min-width: 40px;
  width: 40px;
  height: 40px;
}

.composeMessageContainer {
  background-color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top conversationHeader headerOnScroll">
  <div class="container-fluid">
    <div class="navbar-header horizontalLayout">
      <a class="navbar-brand text-center conversationBackButton">
        <span class="ionicons ion-android-arrow-back"></span>
      </a>
      <div class="conversationDetails">John Doe</div>
      <img class="img-circle img-responsive avatar" src="images/dp.png">
    </div>
  </div>
</nav>
<div class="container-fluid navbar-fixed-bottom composeMessageContainer">
  Text
</div>

Answer 1

如果将flex-shrink: 0 添加到.conversationBackButton 和.avatar 应该可以正常工作，因为它会阻止它们缩小

.conversationBackButton {
  font-size: 24px;
  width: 40px;
  height: 40px;
  padding: 8px!important;
  margin-right: 16px;
  color: #1D333E!important;
  display: inline-flex;
  flex-shrink: 0;             /* added  */
}

.avatar {
  min-width: 40px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;             /* added  */
}

---

要使第 4 个 div 与第 2 个对齐，将其标记移动到 navbar-header horizontalLayout，删除 navbar-fixed-bottom 并将其 CSS 规则更改为此

.composeMessageContainer {
  flex-basis: calc(100% - 56px - 40px);
  margin-left: 56px;
  background-color: red;
}

问题编辑后更新

要使第 4 个 div 与第 2 个对齐，请将其标记移动到 conversationDetails，将 conversationDetails 中的现有文本放在它自己的 div 中并删除 navbar-fixed-bottom

.composeMessageContainer {
  background-color: red;
}

堆栈狙击手

html,
body {
  background-image: url("../images/theme1.png");
  background-repeat: repeat;
}
body {
  padding-top: 80px;
}

.conversationHeader {
  background-color: rgba(255, 255, 255, 0);
  border: none;
  min-height: 60px;
  display: block;
}

.headerOnScroll {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.2);
}

.horizontalLayout {
  width: 100%;
  margin: 0!important;
  padding: 0 9px!important;
  height: 68px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.conversationBackButton {
  font-size: 24px;
  width: 40px;
  height: 40px;
  padding: 8px!important;
  margin-right: 16px;
  color: #1D333E!important;
  display: inline-flex;
  flex-shrink: 0;             /* added  */
}

.conversationDetails {
  background-color: #cccccc;
  font-family: robotoregular, 'sans-serif'!important;
  font-size: 18px!important;
  color: #546770;
  flex-wrap: nowrap;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.avatar {
  min-width: 40px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;             /* added  */
}

.composeMessageContainer {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top conversationHeader headerOnScroll">
  <div class="container-fluid">
    <div class="navbar-header horizontalLayout">
      <a class="navbar-brand text-center conversationBackButton">
        <span class="ionicons ion-android-arrow-back"></span>
      </a>
      <div class="conversationDetails">
        <div>John Doe</div>
        <div class="composeMessageContainer">
          Text
        </div>
      </div>
      <img class="img-circle img-responsive avatar" src="images/dp.png">
    </div>
  </div>
</nav>