ReactJS：为什么CSS Flexbox的alignItems不起作用？

Question

在ReactJS中，使用Material-UI的<TextField/>http://www.material-ui.com/#/components/text-field，我试图使所有的浮动左边，但在两者之间间隔出来，但alignItems不起作用。它只浮在左边，没有间隔。

可能是什么问题？

render() { 

    return ( 
     <div style={{display: 'flex', flexFlow: 'row wrap', alignItems: 'stretch'}}> 
      <div> 
      <TextField/> 
      </div> 
      <div> 
      <TextField/> 
      </div> 
     </div> 
    ) 
} 

Answer 1

您不使用正确的属性。在一行上下文中，您应该使用justify-content将元素放置在x轴上。

render() { 
    return ( 
    <div style={{display: 'flex', flexFlow: 'row wrap', justifyContent: 'space-between'}}> 
     <div> 
     <TextField/> 
     </div> 
     <div> 
     <TextField/> 
     </div> 
    </div> 
) 
}