javascript - 如何在扩展组件(Material-UI + ReactJS)时保留组件(Card 组件)的位置？

Question

我正在使用可扩展的 Card 组件 ( http://www.material-ui.com/#/components/card ) 和 flex 来对齐组件。但是当像下面这样扩展时，空白空间会根据扩展组件的大小添加到与扩展组件同一行的其他组件:

但是即使任何一张卡片被展开，我也希望未展开的卡片保持原样并且中间没有空格(例如:我想要卡片 1 和卡片 4，卡片也一样3和6，即使展开Card 2也像下面这样):

我环顾四周，但似乎找不到解决方案。任何建议或指导将不胜感激。提前谢谢你。

第一行的代码片段(第二行的格式和样式相同):

<div style={{display:'flex'}}>
          <div style={{flex: '1 0'}}>
          <Card style={{ marginLeft: 30, marginRight: 30}}>
            <CardHeader
              title="Card 1"
              subtitle="Subtitle 1"
              actAsExpander={true}
              showExpandableButton={true}
            />
            <CardMedia 
              expandable={true} 
            >
              <img src="image1.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="Action 1" />
              <FlatButton label="Action 2" />
            </CardActions>
          </Card>
          </div>

        &nbsp;

          <div style={{flex: '1 0'}}>
          <Card style={{ marginRight: 30}}>
            <CardHeader
              title="Card 2"
              subtitle="Subtitle 2"
              actAsExpander={true}
              showExpandableButton={true}
            />
            <CardMedia 
              expandable={true}
            >
              <img src="image2.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>

        &nbsp;

        <div style={{flex: '1 0'}}>
        <Card style={{ marginRight: 30}}>
          <CardHeader
            title="Card 3"
            subtitle="Subtitle 3"
            actAsExpander={true}
            showExpandableButton={true}
          />

          <CardMedia 
            expandable={true}
          >
            <img src="image3.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>
      </div>

Answer 1

您可能想查看砌体布局，示例所示 here .在现代浏览器中可以使用纯 CSS 解决方案，否则使用本文中概述的 JS 回退。

在 caniuse 查看浏览器对 column-count 和 column-gap 的支持.

它可能不是您问题的确切解决方案(元素可以在列之间移动)，但至少它是一种删除列中元素之间的空格的布局。

HTML

<div class="masonry">
  <div class="item">
    <Card>
    ...
    </Card>
  </div>
  <div class="item">
    <Card>
    ...
    </Card>
  </div>
  ...
</div>

CSS

.masonry {
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-gap: 1em;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
}

.item {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}