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

Question

我試圖實現兩張牌的並排組件（ http://www.material-ui.com/#/components/card ）並成功完成。 但是當我擴展卡時，會發生以下情況：

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

Answer 1

正如你在flexbox規范中看到的那樣 ， align-items屬性的初始值是stretch ，這就是第二張擴展時第一張卡擴展的原因。
為了解決這個問題，您只需更改父div中align-items屬性的值，如display: 'flex', align-items: 'flex-start'