Разорванный блинчик

Это обычный html-макет для маркетинговых сайтов, например, может содержать три элемента в ряд, обычно с изображением, заголовком, а затем некоторым текстом, описывающим некоторые особенности продукта. На небольших экранах предпочтительнее, чтобы они красиво сжимались и расширялись по мере увеличения размера экрана.

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

Сокращённое написание flex включает: flex: <flex-grow> <flex-shrink> <flex-basis>.

Растягивание flex-grow

Если нужно, чтобы блоки растягивались и заполняли пространство при переносе на следующую строку, установите значение <flex-grow> равным 1, например:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

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

Без растягивания

Если надо, чтобы блоки реагировали до размера <flex-basis>, уменьшались до меньших размеров, но не растягивались при большей ширине, напишите: flex: 0 1 <flex-basis>. Для примера <flex-basis> установим 150 пикселей:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

See this code Deconstructed pancake on x.xhtml.ru.