Stop Chasing Min-Height. Flex is easy.

Posted on Posted in Tips

Stop chasing min-height when creating storefronts, galleries or even blog pages in ‘tombstone’ format. The days of hanging items and empty columns are ovr. Get your stuff to line up for mobile etc with flex css. Here is the basic setup. Download the demo.

The CSS:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
   flex:100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  padding: 5px;
  width: 206px;
  height: 317px;
  margin-top: 10px;
  float: left;
     background:#f00;
}

The Html for 8 items:

content
content
content
content
content
content
content
content