flex-box

Ссылки на Online сервисы по flexbox

Контейнер

// Для флекса достаточно этого (все потомки будут стремится в левый верхний угол):
dislay: flex;

// Управляем переносом потомков на сл. строку:
flex-wrap: nowrap | wrap | wrap-reverse;
// Управляем расположением потомков на горизонтальной оси
justify-content: flex-start | flex-end | center | space-between | space-around;
// Управляем расположением потомков на вертикальной оси
align-items: flex-start | flex-end | center | baseline | stretch;
// Если мы хотим поговорить не о строке с потомками, а о столбце с потомками, то пробуем: 
flex-direction: row | row-reverse | column | column-reverse;

Потомок

// Ширина )) да, та самая, работает как и прежде (в какой пропорции будет делиться весь контейнер)
width: <number>%;
// Или коэффициент (в какой пропорции будет делиться оставшиеся незанятое ни кем пустое место)
flex-grow: <number>