flex
Flex - это сокращеная запись 3 параметров: flex-grow, flex-shrink и flex-basis.
Используется на практике очень редко!
Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis).
Для чего нужен?
Создадим два квадрата:
.kvadrat1 {flex: 2 1 250px;}
.kvadrat2 {flex: 1 2 250px;}
У обоих квадратов одинаковый flex-basis. Это значит, что они оба будут шириной в 250px (ширина контейнера: 500px плюс margin и padding).
Но когда контейнер начнет увеличиваться в размерах, первый квадрат (с большим flex-grow) будет увеличиваться в два раза быстрее, а второй квадрат (с наибольшим flex-shrink) будет сжиматься в два раза быстрее.
Пример.
Чаще всего flex используют чтобы задать одному елементу максимальную ширину из возможной, а другому минимальную.
Занимает максимальный обьем