如何正确使用 flex 并排对齐两个组件（Material UI + ReactJS）？答案

【问题标题】：How to properly use flex to align two components side by side (Material UI + ReactJS)?如何正确使用 flex 并排对齐两个组件（Material UI + ReactJS）？
【发布时间】：2016-05-23 19:33:34
【问题描述】：

我正在尝试实现两张卡（http://www.material-ui.com/#/components/card）的并排组件并且成功地做到了。但是当我展开卡片时，会发生以下情况：

卡片 1 永远不会被手动点击展开，但是当卡片 2 展开时，卡片 1 本身会展开到展开后的卡片 2 的大小，即使卡片 1 从未被点击展开。我环顾四周，但似乎找不到问题的解决方案。任何建议或指导将不胜感激。提前谢谢你。

下面是它的sn-p代码：

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

【问题讨论】：

标签： javascript html reactjs flexbox material-ui

【解决方案1】：

正如您在flexbox spec 中看到的那样，align-items 属性的初始值是stretch，这就是导致第一张卡片在第二张卡片展开时展开的原因..
为了修复它，您只需更改父 div 中 align-items 属性的值，例如 display: 'flex', align-items: 'flex-start'

【讨论】：