如何正確使用flex來並排對齊兩個組件（Material UI + ReactJS）？

我試圖實現兩張卡的並排組件（http://www.material-ui.com/#/components/card）併成功完成。但是，當我擴展卡，會出現以下情況：如何正確使用flex來並排對齊兩個組件（Material UI + ReactJS）？

卡1從不手動點擊進行擴展，但是當卡2的擴大，卡1本身擴展到擴展卡2連的大小雖然卡1從未被點擊進行擴展。我環顧四周，但似乎無法找到問題的解決方案。任何建議或指導將不勝感激。先謝謝你。

下面是它的代碼片段：

 <div style={{display:'flex'}}> 
      <Card style={{ marginLeft: 30, marginRight: 30, flex:1}}> 
      <CardHeader 
       title="Card 1" 
       subtitle="Updated 5/11" 
       actAsExpander={true} 
       showExpandableButton={true} 
      /> 
      <CardMedia 
       expandable={true} 
      > 
       <img src="card1.PNG" /> 
      </CardMedia> 

      <CardText expandable={true}> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
       Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
       Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
      </CardText> 
      <CardActions expandable={true}> 
       <FlatButton label="Action1" /> 
       <FlatButton label="Action2" /> 
      </CardActions> 
      </Card> 

     &nbsp; 

      <Card style={{ marginRight: 30, flex:1}}> 
      <CardHeader 
       title="Card 2" 
       subtitle="Updated 5/11" 
       actAsExpander={true} 
       showExpandableButton={true} 
      /> 
      <CardMedia 
       expandable={true} 
      > 
       <img src="card2.PNG" /> 
      </CardMedia> 
      <CardText expandable={true}> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
       Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
       Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
      </CardText> 
      <CardActions expandable={true}> 
       <FlatButton label="Action1" /> 
       <FlatButton label="Action2" /> 
      </CardActions> 
      </Card> 
     </div>

來源

2016-05-23 Jo Ko

那麼你可以在flexbox spec爲align-items屬性的初始值是拉伸看到，而這正是導致第一卡擴展當第二是擴大..
爲了解決它，你可以只改變你的父div的align-items屬性的值，如display: 'flex', align-items: 'flex-start'

來源

2016-05-24 00:30:20

如何正確使用flex來並排對齊兩個組件（Material UI + ReactJS）？

回答

相關問題