Diferencias entre display: flex y display:inline-flex

HTML
<div id="contenedor-principal">
<h3>Contenedor Principal con display (flex)</h3>
<div class="contenedor-flex">
<div id="elemento-flex-1">elemento-1</div>
<div id="elemento-flex-2">elemento-2</div>
<div id="elemento-flex-3">elemento-3</div>
<div id="elemento-flex-4">elemento-4</div>
<div id="elemento-flex-5">elemento-5</div>
</div>
<h3>Contenedor Principal con display (inline-flex)</h3>
<div class="contenedor-flex1">
<div id="elemento-flex-1">elemento-1</div>
<div id="elemento-flex-2">elemento-2</div>
<div id="elemento-flex-3">elemento-3</div>
<div id="elemento-flex-4">elemento-4</div>
<div id="elemento-flex-5">elemento-5</div>
</div>
</div>

CSS
#contenedor-principal {
position:absolute;
top:1000px;
width: 1000px;
background: whitesmoke;
padding:10px;
}
#contenedor-principal h3{
text-align:center;
}
.contenedor-flex{
display: inline-flex;
background: greenyellow;
margin:10px;
padding:10px;
}
.contenedor-flex1{
display: flex;
background: greenyellow;
margin:10px;
padding:10px;
}
#elemento-flex-1,
#elemento-flex-2,
#elemento-flex-3,
#elemento-flex-4,
#elemento-flex-5 {
 margin: 5px;
padding: 5px;
border: 1px solid black;
}

RESULTADO