На текущий момент флексбокс наиболее востребован, поддерживается подавляющим числом версий браузеров. Например, используется для позиционирования в Bootstrap 4.

Есть множество туториалов по флексбоксу, здесь только краткие выжимки для повседневного использования.

Все свойства, определяющие поведение элементов при использовании flexbox, делятся на свойства родительского элемента (контейнера) и свойства дочерних элементов.

Flexbox - cвойства родителя: 

1. "Включает" использование flexbox

.container {
  display: flex; /* или inline-flex */
}

2. Задает направление дочерних элементов

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

3. Разрыв строки при переносе

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4. Направление и разрыв можно задать одним свойством

.container {
  flex-flow: column wrap;
}

5. Способ распределения дочерних элементов внутри контейнера по ширине.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

6. Свойства выравнивания элементов по вертикали

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

7. Позиционирование всего содержимого внутри контейнера

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Flexbox - cвойства дочернего элемента:

1. Порядок дочерних элементов

.item {
  order: 5; /* по умолчанию 0 */
}

2. Возможность элемента увеличиваться при необходимости кратно значению относительно других элементов

.item {
  flex-grow: 4; /* по умолчанию 0 */
}

3. Определяет возможность сжиматься 

.item {
  flex-shrink: 3; /* по умолчанию 1 */
}

4. Размер элемента по умолчанию

.item {
  flex-basis:  | auto; /* default auto */
}

5. Комбинация свойств flex-grow, flex-shrink и flex-basis

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. Индивидуальное позиционирование элемента в контейнере

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}