html - 尽管设置了“right : 0px”，为什么我的用户消息不正确；？

Question

我想将用户消息放在框的右侧，但它不起作用。

我怎样才能做到这一点？

这是一个小而容易重现的例子，让您了解这种情况。

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 70%; 
    border: solid; 
    border-color: black;
    max-height: 10em; 
    overflow-y: scroll;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: center;
    background-color: white;  
    padding: 10px; 
}

.user_message{ 
    right: 0px;
    border : solid; 
    border-color : grey;  
    max-width : 90%;  
    word-wrap: break-word;
}

<div class="messages_flow">
New message
  <div class="user_message">
   Hello
  </div>
</div>

另外，根据文本框在右侧的事实，我会让文本从右到左填充框。我认为 flexbox 可以帮助解决这种情况。但是目前我什至没有成功把盒子放在右边，所以我的实验目前被阻止在这一步。

标签： htmlcssflexboxcss-grid

Answer 1

尝试使用align-self: flex-end;

.user_message{ 
    right: 0px;
    border : solid; 
    border-color : grey;  
    max-width : 90%;  
    word-wrap: break-word;
    align-self: flex-end;
}