Experiments in Flex

w3c

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

Blitz

https://friendsofepub.github.io/eBookTricks/

@supports (display: -webkit-flex) or (display: flex) {
  ul.grid,
  ol.grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex: 1 1 15em;
    flex: 1 1 15em;
  }

  ul.grid li,
  ol.grid li {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

or

@supports (display: -webkit-flex) or (display: flex) {
  parent {
    min-height: 95vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: {value};
    justify-content: {value};
  }
}