如何将文本放入右侧的 ListItem 中？

Question

我现在有了这些，并且“YoYo”文本向左对齐（默认情况下）。我想控制“YoYo”文本的位置，以便其中一些可以出现在右侧。

我试图提供一个带有justifyContent:'flex-end'或的样式对象，alignSelf:'flex-end'但它们都不起作用。

  <List>
    <ListItem containerElement={<ChatObject id='1' value="YoYo" style={{alignSelf:'flex-end'}} />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
  </List>

的ChatObject定义为：

render() {
    return (
      <TextField
        id={this.props.id}
        value={this.props.value}
        underlineShow={false}
      />
    );
  }

Answer 1

我成功地做到了这一点：

<ListItem style={{display:'flex', justifyContent:'flex-end'}} >
  <ChatObject id={item.id} value={item.value} />
</ListItem>

这里的关键是添加display:'flex'.