Flexbox Product Grid Blog Post (2016/11)

flexbox-product-grid.css

.flex {
  display: flex; /* Make products flex in row direction (default) */
  flex-wrap: wrap; /* Make products overflow on new row */
  justify-content: center; /* Or space-between or space-around */
}

.flex > section {
  flex: 1 1 0; /* Prevent the extra space around content */
  text-align: center; /* Align text on center */
  display: flex; /* Display as flex */
  flex-direction: column; /* Display flex in column */
  align-items: center; /* Align items on center */
  max-width: 400px; /* Set max-width so the last items will behave in a more traditional way */
}

.flex > section > p {
  flex-grow: 1; /* Keep p's same size */
}

ul {
  display: flex; /* Display specs in flex-row */
  justify-content: space-between; /* Specs to start and end of row */
}