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> 
) 
}