如何正确使用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）？

回答

相关问题