css - 如何将文本放在右侧的 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'。