Flexbox增长或缩小使得div略有变化

Question

我使用flexbox设计此导航栏

除了两个问题外，Eveything工作正常：

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

• 我无法理解如何在div 2之下放置第4个div（它也应该像div 2一样增长和缩小），同时保持所有四个在同一行中，因为这是我第一次使用flexbox实现。例如：
  第4个div应位于黑色标记位置，文本和黑色标记应垂直居中。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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中，然后移除{{ 1}}

navbar-fixed-bottom

Stack snipper

＆＃13;

＆＃13;

.composeMessageContainer {
  background-color: red;
}

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;