a { display: flex; flex-flow: row; order: 0; flex: 0 1 2; transition: flex 200ms; } .inline { display: inline-flex; align-self: auto; align-content: stretch; flex: auto; } .a { flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; align-content: flex-start; align-self: flex-start; flex: none; } .b { flex-direction: row-reverse; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; align-content: flex-end; align-self: flex-end; flex-shrink: 1; } .c { flex-direction: column; justify-content: center; align-items: center; flex-wrap: reverse-wrap; align-content: center; align-self: center; flex-basis: auto; } .e { flex-direction: column-reverse; justify-content: space-between; align-items: baseline; align-content: space-between; align-self: baseline; } .f { justify-content: space-around; align-items: stretch; align-content: space-around; align-self: stretch; }