Flex Box Layout

display: flex;
justify-content: center;
align-items: center;

Flex direction

flex-direction: column;

Flex Wrap

flex-wrap: wrap;

Flex Grow, Flex Shrink, Flex Basis

applied to the child within a display: flex container

flex: flex-grow flex-shrink flex-basis;

.flex-container {
  display: flex;
}
.flex-child-1 {
  flex: 0 1 30%;
}
.flex-child-2 {
  flex: 1 0 30%;
}

Shorthand

flex: 1;

/* shorthand for */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;