如何将两个元素与flexbox放在同一行中？

Question

<template> 
<style> 
    .container { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    } 
    .display { 
    display: flex; 
    width: 100%; 
    height: 85%; 
    } 
    .input { 
    display: inline-block; 
    flex-direction: row; 
    align-self: flex-end; 
    justify-content: flex-start; 
    width:100%; 
    } 

</style> 

<paper-drawer-panel> 
    <paper-header-panel drawer> 
    <paper-toolbar> 
     <div>Application</div> 
    </paper-toolbar> 
    </paper-header-panel> 
    <paper-header-panel main> 
    <!--toolbar--> 
    <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <div class="container" tool layout horizontal> 
     <div class="app-title" ><span>Cat Chat</span></div> 

     <div class="account-icon"> 
     <iron-icon icon="account-circle"></iron-icon> 
     <span>number of people</span> 
     </div> 
     </div> 

    </paper-toolbar> 

    <!--Main Content --> 
    <div class="display" flex> 
    </div> 
     <div class="input" flex> 
      <paper-input label="Type message..." value={{input}}></paper-input> 
      <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab> 
     </div> 
    </paper-header-panel> 
</paper-drawer-panel> 

我试图排队纸张输入和纸张按钮在同一行，并在最后在大多数的宽度和按键的输入会。目前该按钮位于输入下方。我如何对齐它们？

Answer 1

你不是在申请display: flex到.input选择。

HTML：

<div class="display"> 
</div> 
<div class="input"> 
    <paper-input label="Type message..." value={{input}}></paper-input> 
    <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab> 
</div> 

CSS：

.input { 
    display: flex; 
    flex-direction: row; 
    align-self: flex-end; 
    justify-content: flex-start; 
    width:100%; 
    }