Свойство order
.container {
display: flex;
}
.item {
order: 3;
}При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.
По умолчанию элементы отображаются в том порядке, в котором они расположены в разметке, а значение свойства order равно 0.
Значение задаётся в виде целого отрицательного или положительного числа. Элементы встают по возрастающей.
Свойство flex-grow
.container {
display: flex;
}
.item {
flex-grow: 1;
}Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).
Если у всех флекс-элементов будет прописано flex-grow: 1, то свободное пространство в контейнере будет равномерно распределено между всеми.
Если при этом одному из элементов мы зададим flex-grow: 2, то он постарается занять в два раза больше свободного места, чем его соседи.
Свойство flex-shrink
.container {
display: flex;
}
.item {
flex-shrink: 3;
}Свойство flex-shrink полностью противоположно свойству flex-grow. Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex-shrink указывает, в каких пропорциях элемент будет уменьшаться.
Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение.
Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).
Два предыдущих свойства работают с пропорциональным разделением пространства, не с конкретными размерами. Они довольно непростые, даже опытный разработчик не всегда знает, как они в точности работают. Загляните в конец статьи, если хотите подробнее почитать о каждом из них.
Свойство flex-basis
.container {
display: flex;
}
.item {
flex-basis: 250px;
}Свойство flex-basis указывает на размер элемента до того, как свободное место будет распределено.
Значением может быть размер в любых относительных или абсолютных единицах: 20rem, 5vw, 250px. А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width, max-width, min-width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.
Если никакие размеры не заданы, а свойству flex-basis установлено значение auto, то элемент занимает столько пространства, сколько нужно для отображения контента.
Свойство-шорткат flex
.container {
display: flex;
}
.item {
flex: 1 1 auto;
}Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex-grow, flex-shrink и flex-basis. Первое значение является обязательным, остальные опциональны.
Значение по умолчанию: 0 1 auto, что расшифровывается как flex-grow: 0, flex-shrink: 1, flex-basis: auto.
Возможные значения: /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;