СВОЙСТВА!!! flex-basis flex-grow и flex-shrink
flex-basis - это та ширина, будем называть так, которая неотъемлима у элемента. Не хотите ее юзать - используйте min-width.
flex-grow - это "жадность" того или иного элемента. Т.е. сколько свободного пространства он съест, по сравнению с соседом (Спека: Определяет, сколько пространства может занимать флекс внутри контейнера. По дефолту = 0). Вспоминаем ФБоксовский способ прижатия футера к низу:
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

и flex-shrink - это то, как будут сжиматься элементы, если места хватать не будет. Антагонист flex-grow. По дефолту = 1, в отличие от flex-grow = 1 (Это ТОЛСТЫЙ намек)
Спека: Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку

Базис задавать НАДО! если желаете адаптивности, при заданном flex-wrap: wrap;
Спека: Свойство flex-basis определяет основу флекса, которая является начальным размером элемента.
ВОПРОСЫ?!
https://webref.ru/css/flex-basis
https://webref.ru/css/flex-grow
https://webref.ru/css/flex-shrink

Нужны ответы? Берете простеньки макетик, а-ля Бутстрап и верстаете весь!!! на флексах. После 5-й верстки наступит Дзен! ИМХО!

Еще полезно может быть посмотреть сниппеты для тех или иных блоков. Вот тут их - КУЧА!
https://css-tricks.com/snippets/html/

Владимир - ВПЕРЕД!!!
Тут вам и чем падаван отличается от ждедая, и чего знать надо и в каком порядке можно изучать. НО скажу вам по секрету- нет лучшего учителя, чем практика! Простите, но уходите из "конторки" и окунайтесь в реальный мир - берите большой проект и верстайте, верстайте, верстайте!!!

Удачи и упорства!

1. Для "мобилок" - ГДЕ МЕТАТЕГ ВЬЮПОРТА??????????????? О какой адаптации может идти речь, если у вас его нет и в помине?
2. О какой адаптации может идти речь, если у вас ширина контейнера задана жестко??? Я молчу о его высоте, которая тоже, эм, задана.
3. Про media - прошу, прочтите что это такое и как с этим работать
4. Не продолжать допиливать, а переверстывать с нуля на %, rem, em, flexbox на чем хотите.

СМОТРЕТЬ
1. Не идеально, но основы дает https://www.youtube.com/playlist?list=PLcVuGt1dXgc...

2. https://www.youtube.com/watch?v=Au6d1d-vFjU&list=P...

Забыть про Бутстрапы-флексбоксы пока не освоите блочную модель и начнете понимать разницу между флоатами и инлайн-блоами и не будете строить сетку сами, руками, с нуля.

ЧИТАТЬ
1. https://habrahabr.ru/post/144003/
2. https://habrahabr.ru/sandbox/89063/

Думаю, коллеги еще подкинут чего годного. Я начинала с этого.

И верстать головой, а не "в портфолио".