.flex-container {
   display: flex;
}

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-container {
   display: flex;
   flex-direction: column;
}

.flex-container {
   flex-direction: column; /* row if horizontal layout */
   justify-content: flex-start;
}

.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-start; /* align-items: flex-start; if column */
}

.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-end; /* align-items: flex-end; if column */
}

.flexcontainer {
   display: flex;
   flex-direction: row; /* works wth 'column' as well */
   align-items: center;
   justify-content: center;
}

.big-item {
   /* This will be twice as big as the small item. */
   flex: 2 0 0;
}
.small-item {
   flex: 1 0 0;
}

/* On the flex container */
.flex-container {
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   flex-direction: row;
   flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   align-content: flex-end;
}

.flex-container {
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: stretch;
}

.flexcontainer {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: center;
}