Results Website Design's company banner with logo showing increased sales.
Results Website Design's company banner with logo showing increased sales.

Flexbox Demo

Flexbox is a versatile CSS3 layout mode that enables your page elements to adjust predictably to various screen sizes.   It helps tremendously with spacing items evenly and centering them across devices.  An excellent guide to Flexbox can be found on CSS Tricks.  Below you will find nine interesting Hubble pictures arranged in a Flexbox row.  Try resizing your browser window to see how the pictures are able to resize and wrap to the next line as needed.

Spirograph Nebula

Cat's Eye Nebula

Galaxy M74

Ring Nebula

Jupiter

Twin Jet Nebula

Sombrero Galaxy

Hourglass Nebula

Eskimo Nebula

Credits: Spirograph: NASA/ESA and The Hubble Heritage Team STScI/AURA; Cat's Eye: ESA, NASA, HEIC and The Hubble Heritage Team STScI/AURA; Galaxy M74: NASA, ESA, and The Hubble Heritage (STScI/AURA)-ESA/Hubble Collaboration; Ring NASA: ESA, and C. Robert O’Dell (Vanderbilt University); Jupiter: NASA, ESA, and A. Simon (Goddard Space Flight Center); Twin Jet: ESA/Hubble & NASA, and Judy Schmidt; Sombrero: NASA/ESA and The Hubble Heritage Team STScI/AURA; Hourglass: Raghvendra Sahai and John Trauger (JPL), the WFPC2 science team, and NASA/ESA; Eskimo: NASA, ESA, Andrew Fruchter (STScI), and the ERO team (STScI + ST-ECF).

CSS
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1%;
  }
  
  .flex-item {
    width: 30%;
    max-width: 275px;
    min-width: 200px;
    margin-left: 1%;
    margin-right: 1%;
  }
  
  .image {
    width: 100%;
    height: auto;
  }
HTML
<div class="flex-container">

  <a class="flex-item" href="http://example-url.org">
    <img class="image" src="http://example-image.jpg">
    <h3 class="pic-title">Spirograph Nebula</h3>
  </a>

  <!--Each of the nine flex items follow the format above-->

</div>