Question

我有一个聊天网络应用，其底栏包含：按钮，文字输入，按钮：

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry">
    <input type="text" id="chatmsg" name="chatmsg">
  </div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

#bottom-bar {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
}

我想要实现的目标：（1）将左侧按钮放在底栏的左侧，（2）将右侧按钮放在底栏的右侧，（3）放置一个延伸的输入栏在中间使用所有可用的空间。

我试过了：

#bottom-bar {
   ...the css above and additionally ...
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content:space-between;
   align-items: center;
}

#chatmsg{
  width: auto;
}

但是这让我无处可去。非常感谢任何帮助。

Answer 1

textentry必须成长并占据所有位置：

#bottom-bar {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    align-items: center;
}
.button-left,
.button-right {
  width: 40px;
}
.textentry{
  flex-grow: 1;
}
#chatmsg {
  width: 100%;
}

检查一下：https://jsfiddle.net/43Lqzznt/3/

Answer 2

使用calc(100% - 80px);作为.textentry的宽度（即全宽减去两幅图像的宽度），并使输入100％宽。如果你这样做，输入会将其容器向右溢出，所以使用padding上的.textentry来补偿它并根据需要调整元素之间的距离，如我的代码段所示。

＆＃13;

html,
body {
  margin: 0;
}

#bottom-bar {
  position: fixed;
  bottom: 0px;
  height: 40px;
  width: 100%;
}

#bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textentry {
  width: calc(100% - 80px);
  padding: 0 10px 0 2px;
}

input#chatmsg {
  width: 100%;
}

＆＃13;

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry"><input type="text" id="chatmsg" name="chatmsg"></div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

＆＃13;

Answer 3

在容器上使用display:flex并调整输入div的flex:1或将其宽度设置为100%应该这样做。检查控制台中的输出。

FLEX

当容器div缩小或扩大时，输入框将在图像之间拉伸。

#bottom-bar {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content:space-between;
   align-items: center;
}

#chatmsg{
  width: 100%;
}

.textentry {
  /* width: 100% */
  flex: 1;
}

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry">
    <input type="text" id="chatmsg" name="chatmsg">
  </div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

聊天网络应用程序：div位置内的flex-boxes：已修复

3 个答案: