Flexbox Photo Gallery Examples

• Grids built with CSS Grid
• Flexbox Examples

These examples demonstrate various ways of presenting photos in a photo gallery using flexbox.

• Flex-direction row

  Uses flex-direction: row to make the photos run in rows. This is the initial setting — if you don't set the flex-direction property it will use row anyway.

  • View example

  

• Flex-direction column

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

  • View example

  

• Align items stretch

  Uses align-items: stretch, which stretches any shorter images to the height of the tallest image. This is the initial value of the align-items property, so if you don't set this property, it will use stretch anyway.

  • View example

  

• Align items flex-start

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

  • View example

  

• Align items flex-end

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

  • View example

  

• Align items center

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

  • View example

  

• Grids built with CSS Grid
• Flexbox Examples