Флекс-блоки

позволяют элементам размещаться динамически.

По умолчанию блочные элементы HTML распределяются на всю ширину страницы, втроенные элементы HTML располагаются внутри блочных элементов, рядом друг с другом. <p><span>первый встроенный элемент</span><span>второй встроенный элемент</span> блочный элемент</p>

первый встроенный элементвторой встроенный элемент блочный элемент

Элемент HTML обозначенный как флекс-контейнер позволяет управлять размещением встроенных элементов, называемых флекс-элементами. Флекс-контейнер занимает всю доступную ширину. Изначально флекс-элементы расположены горизонтально слева направо. Высота флекс-элементов выравнивается по высоте флекс-контейнера, независимо от занимаемого размера содержимого этих элементов, ширина по содержимому флекс-элементов. Линию вдоль которой выстраиваются флекс-элементы называют главной осью (изначально это горизонтальная линия), а перпендикулярно ей расположенную линию - поперечной (изначально это вертикальная линия). Если поменять оси местами, элементы начинут выстраиваться горизонтально.

display:flex

обозначает элемент как flex контейнер, при этом его дочерние элементы начинают выстраиваться друг за другом горизонтально, независимо от того, блочные они или строчные.

display:inline-flex

флекс-контейнер с поведением строчно-блочного контейнера, который расширяется по содержимому.

Если для флекс элементов не задан размер, то флекс-контейнер распределяет элементы вдоль главной оси, выделяя им одинаковое пространство.

flex:

регулирует поведение флекс-элемента.

01 auto -элемент занимает столько места сколько ему требуется, сжимается при необходимости.

11 auto -элемент будет увеличиваться, займет остальное место, которое не требуется другим элементам.

flex - формат сокращенной записи трех свойств определяющих размер и поведение флекс-элемента.
flex: flex-basis flex-grow flex-shrink
Если не указать их значения, то значения по умолчанию будут:
flex-basis: 0%; flex-grow: 1; flex-shrink: 1;
flex:0% 11;

flex-basis

Определяет базовый размер флекс-элемента. Принимает любое значение приминимое к width. Изначально равно auto и браузер ищет значение свойства width для данного элемента, если оно не задано, ширина определяется по ширине контента. Если свойство flex-basis задано, то width будет проигнорировано.

flex-grow

Указывает флекс-элементу расширяться или не расширяться при доступности свободного места в флекс-контейнере. flex-grow:0 - флекс-элемент не расширяется больше значения flex-basis. flex-grow с значением больше 0 будет занимать доступное свободное место в флекс-блоке. flex-grow:2 займет в два раза больше места чем flex-grow:1

flex-shrink

Размер флекс элементов распределенный горизонтально может превысить размер флекс-контейнера. Данное значение указывает на возможность сжатия флекс-элемента. flex-shrink:0 - элемент не сжимается. flex-shrink с значением больше 0 будет зжиматься пока переполнение не будет устранено, элемент с значением 2 сожмется сильнее, чем флекс-элемент с флекс-значением 1. Если устанавливить поле между флекс-элементами, flex-shrink:1 обеспечит уменьшение флекс-элементов на величину этого поля. Если у обоих элементов будет установлено свойство flex-shrink:1, то каждый элемент сожмется на 50% от величины установленного поля (margin-left:2em; 2em/2=1em) Каждый флекс-элемент уменьшится на 1em;