[css] display flex

 

.flex-container {
    display: flex;
    display: inline-flex;

    flex-direction: column;         /* vertically, from top to bottom */
    flex-direction: column-reverse; /* vertically, from bottom to top */
    flex-direction: row;            /* horizontally, from left to right */
    flex-direction: row-reverse;    /* horizontally, from right to left */

    align-items: baseline;
    align-items: center;
    align-items: flex-start;
    align-items: flex-end;
    align-items: stretch; /* default */

    justify-content: baseline;
    justify-content: center;
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: start;
    justify-content: end;
    justify-content: left;
    justify-content: right;
    justify-content: stretch;
    justify-content: safe;
    justify-content: unsafe;
    justify-content: first baseline;
    justify-content: last baseline;
    justify-content: space-around;
    justify-content: space-between;
    justify-content: space-evenly;

    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;

    /* shorthand for flex-direction and flex-wrap */
    flex-flow: column;
    flex-flow: column-reverse;
    flex-flow: row;
    flex-flow: row-reverse;
    flex-flow: nowrap;
    flex-flow: wrap;
    flex-flow: wrap-reverse;
    flex-flow: row wrap;

    align-content: center;
    align-content: flex-start;
    align-content: flex-end;
    align-content: stretch;
    align-content: space-around;
    align-content: space-between;
}