在展开一个组件（Material-UI + ReactJS）时，如何保留组件（卡片组件）的位置？

Question

I am using an expandable Card component ( http://www.material-ui.com/#/components/card ) and flex for alignment of the components. But when one expands like the following, the empty spaces are added based on the size of the expanded component to the other components in the same row as the expanded component:

But even when any one of the cards is expanded, I would like the unexpanded cards to retain their positions as such and not have empty spaces in the between (for example: I would like Card 1 and Card 4, same for Card 3 and 6, to be like the following even when Card 2 is expanded):

I looked around but can't seem to find the solution. Any suggestions or guidance would be greatly appreciated. Thank you in advance.

Snippet of the code for the first row (it is the same format and style for the second row):

<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

You might want to check out a masonry layout, example shown here . A CSS-only solution is possible in modern browsers, otherwise use the JS fallback outlined in the article.

Check out the browser support for column-count and column-gap at caniuse .

It might not be the exact solution to your problem (the elements can move around between columns), but at least it's a layout that removes the spaces between elements in a column.

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%;
}