Веб-приложение для чата: flex-боксы внутри div: исправлено

caliph спросил: 14 ноября 2017 в 06:26 в: html

У меня есть веб-приложение для чата с нижней панелью, состоящей из: кнопки, ввода текста, кнопки:

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

Но это ни к чему не привело. Любая помощь очень ценится.


0 ответов