Flexbox Cards

These examples demonstrate various ways of customizing cards with flexbox.

Align items stretch

Uses align-items: stretch which is the default setting. This stretches the height of the cards so that they're all the same height as the tallest card in the row.
- View example
Align items flex-start

Uses align-items: flex-start which sets each card to the top of the row. The height of each card shrinks so that it fits the content. This results in varying sized cards (unless they all have content of the same height).
- View example
Align items flex-end

Uses align-items: flex-end which sets each card to the bottom of the row. The height of each card shrinks so that it fits the content. This results in varying sized cards (unless they all have content of the same height).
- View example
Align items center

Uses align-items: center which sets each card to the center of the row. The height of each card shrinks so that it fits the content. This results in varying sized cards (unless they all have content of the same height).
- View example
Double width card

Explicitly sets the width of the cards so that the first one is double the width of the others. Actually, it's more than double, as it needs to compensate for the margin.
- View example
Flex-direction column

Uses flex-direction: column to make the cards run in columns instead of (the default) rows. This example uses an explicitly set height on the flex container to determine when the cards wrap over to the next column.
- View example