Как сделать адаптивный сайт через flexbox?
меня интересует только единицы измерения
они никак не связаны с flexbox и с адаптивностью. Или правильнее сказать связаны косвенно. Вы можете использовать любые единицы или их комбинации.
Адаптивность сайта это комплекс мер. Что-то достигается благодаря использованию flexbox, что-то медиазапросами, что-то относительными единицами. И одно не исключает другого. Одни блоки могут быть в одних единицах, другие в других. Шрифты могут быть в третьих. 
Дать совет по использованию тех или иных единиц можно только на примере участка верстки в конкретном проекте, а не дизайна в целом в абстрактном проекте.
Опытный верстальщик смотрит на дизайн и продумывает, как будет реализовать адаптивность того или иного блока, соответственно наметив себе план по каждому куску принимает решение в пользу тех или иных единиц, методов адаптивности и т.д. И подчеркну, никто не запрещает Вам использовать разные единицы, не стоит выбирать для всего проекта допустим % и потом городить что попало, только чтобы не перейти на px.
Так же как это делается и c bootstrap. У вас есть набор классов, который при определенной ширине экрана меняет свое значение.
Берем обычный пример:<div class="row">
	<div class="col-md-4 col-xs-4"></div>
	<div class="col-md-4  col-xs-4"></div>
	<div class="col-md-4  col-xs-4"></div>
</div>
Так мы создали строку из трех блоков в ней. В bootstrap 3 у вас блокам задается свойство float:left;
В случае с flex, вам надо задавать .row свойства:.row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
У колонок вы убираете float:left
Далее при адаптации вы .row присваиваете одно свойство: flex-direction:column; если вам надо чтобы внутренние элементы располагались в колонку (столбик). Для внутренних блоков так же пишете что-нибудь типа col-xs-12, чтобы они занимали 100% ширину родителя на телефоне. Ничего сложного.