Допустим, у нас классический случай: сайдбар и область с основным контентом. Как мы раньше верстали такую конструкцию? Задавали им ширину и ставили рядом с помощью float. А потом на необходимом размере убирали float:

@media (max-width: 20rem) {
  .sidebar, .main-content {
    width: 100%;
    float: none;
  }
}

А теперь сделаем то же самое на флексах и избавимся от медиа-запроса. Для начала откажемся от размеров и примем, что ширина сайдбара должна быть не менее 300px, а ширина блока с основным контентом — не менее 60% родительского элемента:

.section { /* родительский блок */
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  min-width: 60%;
}

.sidebar {
  flex-basis: 300px;
}

Теперь нам нужно быть уверенными, что сайдбар и основной контент получат необходимую ширину, а если поставить их друг под друга, то займут всю доступную ширину. Поэтому для сайдбара мы пропишем flex-grow: 1;, а для основного контента — flex-grow: 9999;. Откуда 9999? Всё очень просто. Если мы напишем основному контенту flex-grow: 1;, то в итоге его ширина будет 60% от родителя, а остальное место займёт сайдбар, у которого тоже flex-grow: 1;. Но нам же нужно, чтобы ширина сайдабара была только 300px. И здесь полезно вспомнить как вообще работает flex-grow. Он делит между элементами, для которых он указан, свободное место, оставшееся после определения размеров и размещения всех остальных элементов внутри флекс-контейнера. Допустим, у нас остаётся свободными 100px. Для одного элемента мы указываем flex-grow: 1;, а для другого flex-grow: 3. Это означает, что первый элемент получит 1/4 от 100px (25px), а второй — 3/4(75px). Теперь понятнее, да? Когда мы указываем для основного контента flex-grow: 9999;, то сайдбар со своим flex-grow: 1; получает всего лишь 1/10000, что браузер округляет до 0. И так мы получаем необходимые размеры.

Полный код примера:

.section {
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  min-width: 60%;
  flex-grow: 9999;
}

.sidebar {
  flex-basis: 300px;
  flex-grow: 1;
}

А что делать, если нужно, чтобы между сайдбаром и основным контентом был отступ? Очень просто: добавить margin сайдбару и основному контенту и компенсировать его у родителя:

.section {
  margin: -0.5rem;
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  margin: 0.5rem;
  min-width: 60%;
  flex-grow: 9999;
}

.sidebar {
  margin: 0.5rem;
  flex-basis: 300px;
  flex-grow: 1;
}

И ещё одно а что. А что, если нужно сделать респонсивную сетку для множества элементов, типа каталога? Тут во всей красе раскрывается grid. Достаточно всего пары строк кода:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
}

Вот так просто. Никаких лишних телодвижений, никаких заморочек с медиа-запросами. Просто работает.

Кстати, эти примеры отлично отвечают на вопрос «Что лучше использовать, гриды или флексы?». Он в корне неверен. Не нужно выбирать что-то одно. Гриды не заменяют флексы. Их прекрасно можно использовать совместно. Можно общую раскладку сделать по вышеуказанному методу на флексах, а внутри блока с основным контентом для сетки использовать гриды. Выбирайте инструменты исходя из задачи.